对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义 data-src （这个属性可以自定义命名，我才用data-src）属性指向真实的图片。下面是我的实现代码

<imgsrc="default.jpg"data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"/>

<head>
<metacharset="UTF-8"><title>Document</title>
<style>
 img{ display: block; margin-bottom:50px; width:400px; height:400px; }
</style>
</head>
<body>
	<img src="" data-src="https://img1.360buyimg.com/da/jfs/t4681/172/669886432/126999/bcab98d/58d32a5cNcca32947.jpg" alt="">
	<img src="" data-src="https://img10.360buyimg.com/da/jfs/t4444/10/225613061/217745/e6262498/58cbd4a0Nb99325f3.jpg" alt="">
	<img src="" data-src="https://img13.360buyimg.com/da/jfs/t4711/313/520217907/80249/fe6c6a43/58d0ce61N66cb443a.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

<!--  jQuery -->
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
   var n = 0,
   imgNum = $("img").length,
   img = $('img');
   lazyload();
   $(window).scroll(lazyload);
   function lazyload(event) {
       for (var i = n; i < imgNum; i++) {
           if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
               if (img.eq(i).attr("src") == "") {
                   var src = img.eq(i).attr("data-src");
                   img.eq(i).attr("src",src);
                   n = i + 1;
               }
           }
       }
   }
</script>
　　

　原文来自： http://www.codesec.net/view/503074.html

实现图片懒加载(lazyload)的更多相关文章

  1. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

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

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

  3. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  4. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  5. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  6. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  7. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  8. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  9. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  10. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

随机推荐

  1. 紫书 习题 8-15 UVa 1617 （贪心）

    先排序, 然后每个线段先放右端点, 然后往下放, 如果不能放就整体往左移动, 当不能往左移动的时候就ans++ 开始下一个整块.判断能不能向左移动要用一个变量储存每个已经放了的区间中线段与左端点距离的 ...

  2. POJ 2570 Fiber Network（最短路 二进制处理）

    题目翻译 一些公司决定搭建一个更快的网络.称为"光纤网". 他们已经在全世界建立了很多网站.这 些网站的作用类似于路由器.不幸的是,这些公司在关于网站之间的接线问题上存在争论,这样 ...

  3. [android]DES/3DES/AES加密方式

    DES 支持8位加密解密,3Des支持24位,Aes支持32位.3Des是Des算法做三次.位数的单位是字节byte.不是bits. 3Des是把24位分成3组.第一组八位用来加密,第二组8位用于解密 ...

  4. An existing connection was forcibly closed by the remote host

    StackOverflow https://stackoverflow.com/questions/5420656/unable-to-read-data-from-the-transport-con ...

  5. 美国人教你这样用Google，你真的会变特工

    转自微博:黑客师: 用了这么久的谷歌,今天才发现. 第一篇 在搜索框上输入:“indexof/”inurl:lib 再按搜索你将进入许多图书馆,并且一定能下载自己喜欢的书籍. 在搜索框上输入:“ind ...

  6. window.location.href=*.html访问没反应问题

    window.location.href=*.html访问没反应问题 1.SpringMvc配置中:扫描controller.视图层配置路径是否正确 报doc根路径 <mapper>匹配错 ...

  7. mysql读写分离的解决方案

    来源于网上整理 http://yanwt.iteye.com/blog/1460780 现有三种解决方式实现mysql读写分离 1 程序修改mysql操作类 优点:直接和数据库通信,简单快捷的读写分离 ...

  8. 谈谈Vim中实用又好记的一些命令

      本文的目的在于总结一些日常操作中比较实用.有规律的Vim命令,而不致于介绍一些基础的Vim知识,比如几种插入模式,hjkl移动命令,dd删除本行,p粘贴 等等,故对Vim基本知识不够熟悉的请参见其 ...

  9. perl模块

    查看perl模块安装目录:find `perl -e ‘print “@INC”‘` -name ‘*.pm’ -print 为什么要写或要模块呢?简言之:代码重用,更多见于写一组工具集,有很多地方是 ...

  10. webStrom的破解以及汉化

    破解方法: 把JetbrainsCrack-3.1-release-enc.jar包放到bin目录下,然后把webstorm64.exe.vmoptions文件用文本打开, 在最后面加上一句-java ...