PC端、移动端(手机端)图片懒加载方法整理

1、PC端图片懒加载：

jquery.lazyload是一个实现图片延迟加载的jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入，直到用户将页面滚动到它们所在的位置。

1.引入js文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

2.img标签

<img class = "lazy" src="data:images/placeholder.gif" data-original="images/example.png">

img标签的src指向一个图片占位符，这里推荐一个在线获取图片占位符的站点 > http://placehold.it/，真实图片路径必须写在data-original中。

3.调用lazyload

$("img.lazy").lazyload();

图片的占位符除了可以通过src属性来指定，也可以通过lazyload函数的参数来指定：

$("img.lazy").lazyload({placeholder: "images/placeholder.gif"
});

4.占位图片事件触发加载

如果我们希望滚到到图片的位置后，还要通过click或hover事件来唤醒图片的加载，我们可以指定lazyload函数的event属性：

$("img.lazy").lazyload({placeholder: "images/placeholder.gif",event: "click"
});

当图片完全加载的时候，插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果，如fadeIn：

$("img.lazy").lazyload({effect: "fadeIn"
})

5.提前加载图片

lazyload插件默认用户滚动到图片位置时才触发加载图片，如果我们希望滚动到距离图片一定位置就触发加载，可以指定lazyload函数的threshold参数：


$(“img.lazy”).lazyload({
threshold: 200
});

这样，当用户滚动到距离图片200像素时图片就开始加载了。

6.设置查找图片张数

lazyload的实现原理是，在页面滚动时，会搜索未加载的图片，如果图片在可视范围内就加载，默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序，所以如果有些图片定义在前面，但由于页面不好的布局图片将会呈现在后面，那么就会导致图片没办法正常显示。

此时我们可以通过lazyload函数的failure_limit参数：

$("img.lazy").lazyload({         failure_limit: 10
});

这样一来，插件会搜索至少10个未加载的图片才停止搜索，如果你的图片布局比较不规则，可以尝试将这个参数调大。

下面这是一个demo 直接复制粘贴到sublime上就能查看了比心♥ ♥

// 首先引入jQuery文件和懒加载文件<script type="text/JavaScript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script><div>
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
</div><script type="text/javascript">
$(function() {$("img.lazy").lazyload({placeholder: "https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg",effect : "fadeIn"
});
});
</script>

根据用户行为的预加载

http://www.zhangxinxu.com/wordpress/2016/06/image-preload-based-on-user-behavior/

这个文章有时间可以看看

2、Mobile移动端懒加载：

一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！
PC和移动端都适用！很轻量好用！

下载地址：https://github.com/toddmotto/echo

echo.js-demo地址： https://peiluojia.github.io/echo.js-demo/

css:

<style>.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>

html:

<div class="demo"><img class="lazy" src="data:images/blank.gif" data-echo="images/big-1.jpg">
</div>

blank.gif 是一个默认的1*1的空白图片，data-echo 的属性值是图片的真实地址。设置北京图loading.gif会有loading的效果，blank.gif会根据父盒子的宽度生成一个宽高相等的正方形块。当blank.gif在可视区域内，图片就会加载。

js:

<script src="js/echo.min.js"></script><script>Echo.init({offset: 0,//离可视区域多少像素的图片可以被加载throttle: 0 //图片延时多少毫秒加载
}); </script>

两者都非常简单，实现思路是一样的，只是jquerylazyload多几个属性。其实常用的echo就足够了，并且完全可以集成到自己项目中的公共js中，图片懒加载是相当常见且简单实用的功能，如果你的项目中还是傻瓜式的一次性全部加载，那么请花20分钟优化下~

作者：裴珞嘉
来源：CSDN
原文：https://blog.csdn.net/alokka/article/details/74421347
版权声明：本文为博主原创文章，转载请附上博文链接！