<!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. sqljdbc4.jar的安装

    自己项目环境(idea+jdk1.8+tomcat8),在搭建maven项目时,由于本地数据库是使用了sqlserver,所以需要项目与sqlserver之间建立连接,但是网上查的资料都说微软不允许以 ...

  2. cmake 添加头文件目录，链接动态、静态库

    罗列一下cmake常用的命令. CMake支持大写.小写.混合大小写的命令. 1. 添加头文件目录INCLUDE_DIRECTORIES 语法: include_directories([AFTER| ...

  3. JFinal Web开发学习(八)后台集成H-ui-admin前端框架

    h-ui-admin是一个很不错的前端框架h-ui实现的一个后台管理系统的前端. 1.在WebRoot目录下新建admin目录 2.下载h-ui-admin(当前最新是2.5版本)并解压至admin文 ...

  4. Exploring the world of Android :: Part 2

    September 17th, 2009 by Tom van Zummeren | And I’m back! Reporting live on the glorious adventures i ...

  5. Oracle_SQL(4) DDL 表和约束

    数据库对象分为占存储空间的对象和不占存储存储空间的对象.占存储空间的对象主要包括:表.索引等.select distinct segment_type from dba_segments order ...

  6. geoserver 发布无坐标png

    1.geoserver 安装一些插件的时候,直接去http://docs.geoserver.org/ 官网,选择自己geoserver对应的版本的插件就可以了. 2.geoserver 发布自身带有 ...

  7. CODE[VS]2494 Vani和Cl2捉迷藏

    原题链接 这里有一个结论:最多能选取的藏身点个数等于最小路径可重复点覆盖的路径总数. 所以我们可以先传递闭包,然后求最小路径点覆盖即可. #include<cstdio> #include ...

  8. Luogu 2059 [JLOI2013]卡牌游戏 - 概率DP

    Solution 设状态 $F[i][j] $为 还剩余 $i$ 个人时, 第 $j$ 个人 的胜率. 边界: $F[1][1] = 1$(只剩下一个人了). 这样设置状态就能使 $i-1$ 个人的答 ...

  9. Nowcoder OI赛制测试2 F 假的数学题 - 斯特林公式 + 二分

    Description 给定$X$, 找到最小的$N$ 使得$N! > X^X$ 数据范围:  $x <= 1e11$ Solution $X^X$ 太大, 高精也存不过, 所以取对数 : ...

  10. C++点和箭头操作符用法区别

    变量是对象的时候用“.”访问 变量是对象指针的时候用“->”访问 例: #inlclude <iostream> using namespace std; class A { pub ...