<!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. C盘文件过大，C盘空间莫名丢失，pagefile.sys文件

    设置显示隐藏文件和受保护的系统文件后此文件会显示pagefile.sys这个是window的页面文件,作为系统的虚拟内存使用,和你的物理内存一样大,你内存已经很大了,不用开虚拟内存了.在系统高级属性下 ...

  2. Spring <context:annotation-config> 和 <context:component-scan> 区别

    一篇很不错的文章,看到就是赚到Get.... https://www.cnblogs.com/leiOOlei/p/3713989.html 说白了 :<context:component-sc ...

  3. 解决python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xXX' in position XX（转）

    原文地址:https://www.cnblogs.com/feng18/p/5646925.html 从网上抓了一些字节流,想打印出来结果发生了一下错误: UnicodeEncodeError: 'g ...

  4. opencv 3.2安装

    opencv 3.2安装 下载地址: https://sourceforge.net/projects/opencvlibrary/files/opencv-win/3.2.0/opencv-3.2. ...

  5. qrcodenet二维码图片下扩展区域添加号段的操作

    总监安排了个任务,一个号码导出一个二维码图, 我实现了最终还能批量生成,结果主管说要在图片下边添加一行,和图片是一起的 最开始把控件的上的图给改了,结果保存起来没用,控件上的图跟要保存的不是一个事. ...

  6. istio-jaeger-python调用链配置

    虽然,istio ingress controller已经生成了jaeger 记录所需要的信息,但是多个分布式之间没法清晰记录相互之间的依赖关系.所以相关的项目还需要加入特殊配置. 如:python- ...

  7. Python 字符串（center）

    center 描述 Python center() 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串.默认填充字符为空格. 语法 center()方法语法: str.center(w ...

  8. Github上Markdown基本语法

    基础写作和语法格式 本篇文章的内容来源于Github的基础写作帮助.如果在观看时有什么问题,可以直接查阅源文件.另外需要说明的是Git对Markdown的支持增加了一些扩展功能,因此在Git上可以渲染 ...

  9. 网页 PHP 动态师范

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Docker原生网络技术简介

    Docker原生网络技术简介 默认网络 在宿主机部署好Docker Engine后会默认创建三种网络:Bridge.Host和None,如下: docker network ls NETWORK ID ...