<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>图片懒加载(可视区域加载)</title>

 <style>

  * {

  padding: 0px;

  margin: 0px;

  }

  html,

  body {

  width: 100%;

  min-height: 100%;

  }

  #SB {

  margin: 0;

  padding: 0;

  list-style: none;

  }

  #SB .in {

  border: 1px solid red;

  margin: 10px;

  text-align: center;

  height: 400px;

  width: 400px;

  float: left;

  }

  .in img {

  border: none;

  vertical-align: middle;

  height: 400px;

  width: 400px;

  }

 </style>

 </head>

 <body>

 <ul id="ljz">

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

  <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li>

 </ul>

 <script type="text/javascript">

  var aImages = document.getElementById("ljz").getElementsByTagName('img'); //获取id为ljz的文档内所有的图片

  loadImg(aImages);

  window.onscroll = function() { //滚动条滚动触发

  loadImg(aImages);

  };

  //getBoundingClientRect 是图片懒加载的核心

  function loadImg(arr) {

  for(var i = 0, len = arr.length; i < len; i++) {

   if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {

   arr[i].isLoad = true; //图片显示标志位

   //arr[i].style.cssText = "opacity: 0;";

   (function(i) {

    setTimeout(function() {

    if(arr[i].dataset) { //兼容不支持data的浏览器

     aftLoadImg(arr[i], arr[i].dataset.imgurl);

    } else {

     aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));

    }

    arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein

    }, 200)

   })(i);

   }

  }

  }

  function aftLoadImg(obj, url) {

  var oImg = new Image();

  oImg.onload = function() {

   obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象

  }

  oImg.src = url; //oImg对象先下载该图像

  }

 </script>

 </body>

</html>

懒加载js写法二：

    <script type="text/javascript">

	//js懒加载

        var aImg = document.getElementById('ljz').querySelectorAll('img');

        var len = aImg.length; //获取图片数量

        var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历

		window.onload = function(){

           window.scrollTo(0,1);

        }

		window.onscroll = function() {  //滚动执行

            var seeHeight = document.documentElement.clientHeight;  //获取可见区域高度

            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  //获取body内滚动条位置

            for (var i = n; i < len; i++) {

                if (aImg[i].offsetTop <= seeHeight + scrollTop) {

                    if (aImg[i].getAttribute('src') == '') {

                        aImg[i].src = aImg[i].getAttribute('data-imgurl');

						if(aImg[i].getAttribute('src') == ''){

							aImg[i].src = 'image/zwtp.png';

						}

                    }

                    n = i + 1;

                    console.log('n = ' + n);

                }

            }

        };

    </script>

　　

js, javascript 图片懒加载 实例代码的更多相关文章

  1. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  2. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  3. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  4. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  5. 原生js实现图片懒加载+加入节流

    这两天在学习图片的懒加载实现,看了很多大佬的博客,终于有了点成果.现在用了其中一位大佬的文章中的代码实现了图片懒加载并且在其基础上加入了节流函数. 原理就不多讲了,有需要的可以去大佬的文章看看.大佬文 ...

  6. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  7. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

  8. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  9. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

  1. ajax 之POST请求，参数序列化

    比如,,我们在没有使用jquery的时候,没有$.post来让我们使用,那我们像下面这样直接发送: var params1 = { username: username, passwrod: pass ...

  2. msysgit解决中文乱码问题

    项目中在用git,安装msysgit客户端后处理中文是有问题的: ls中文目录/文件名乱码:提交中文的log,push到服务器上会乱码:git log查看服务器pull过来的log乱码. 1.ls命令 ...

  3. stl之容器、迭代器、算法几者之间的关系

    转自:https://blog.csdn.net/bobodem/article/details/49386131 stl包括容器.迭代器和算法: 容器 用于管理一些相关的数据类型.每种容器都有它的优 ...

  4. Hadoop（二） HADOOP集群搭建

    一.HADOOP集群搭建 1.集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据的存储,集群中的角色主要有 Na ...

  5. CSS中(font和background)的简写形式

    转自:http://blog.csdn.net/shenzhennba/article/details/7356095 1.字体属性主要包括下面几个:font-family(字体族): “Arial” ...

  6. MySQL学习笔记-MySQL数据库优化实践[转]

    最近一段时间,我们整理了一些关于Percona,Linux,Flashcache,硬件设备的优化经验,分享给大家: 硬件 1.开启BBWC RAID卡都有写cache(Battery Backed W ...

  7. C++ 的虚析构函数

    当一个基类的指针指向一个派生类的对象,并用该基类的指针去删除或者析构派生类对象时,如果基类的析构函数不是声明为虚函数,那么在析构时基类的析构函数将会被直接调用,派生类的析构函数应为没被调用而导致内存泄 ...

  8. swift 要点

    swift 基本语法注意点 通常来说,编程语言教程中的第一个程序应该在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现 print("Hello, world! ...

  9. 事务 TRANSACTION

    事务是数据库中一个但单独的执行单元(Unit),他通常由高级数据库操作语言(如SQL)或编程语言(如C++.Java)编写的用户程序的执行所引起.当在数据库中更改数据成功时,在事务中更改的数据便会提交 ...

  10. 数据库MySQL 之 索引原理与慢查询优化

    数据库MySQL 之 索引原理与慢查询优化 浏览目录 索引介绍方法类型 聚合索引辅助索引 测试索引 正确使用索引 组合索引 注意事项 查询计划 慢查询日志 大数据量分页优化 一.索引介绍方法类型 1. ...