图片延迟加载、懒加载原理及代码实现

图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

 

原理即是网页代码中有img标签，但是没有src属性，只是把src原本应该放的图片链接放到另外一个属性值去，比如说data-src，这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接，通过适时把获取到的图片链接赋值给src属性上，这样图片就能在适时的时候渲染出来，而不是一次性全部加载，而是通过鼠标滚动，一个一个加载进来。

基于jQuery的代码（使用前务必引入jQuery）：

• <img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
• <script>
• $(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
• $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
• var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
• var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
• var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
• var halfDoc = $(window).height();//获取浏览器窗口可视高度
• var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
• var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
• if(ifElse){//如果条件成立
• setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
• }
• })//end object 'img'
• })//end object window
• </script>

这小段代码包含的实用知识点很多，理解好了一定不吃亏~

转载于:https://www.cnblogs.com/luoshixingWEB/p/6912576.html