PC网站、手机网站的图片懒加载方法lazyload插件

对于网站制作实现图片延迟加载,我们用lazyload插件解决。

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

1.引入js文件:

<script src=”jquery.min.js”></script>
<script src=”jquery.lazyload.min.js”></script>

2.img标签:

<img class = “lazyload” src=“images/placeholder.gif” data-original=”images/example.png”>

img标签的src指向一个图片占位符,真实图片路径必须写在data-original中。

3.调用lazyload:

<script>
$("img.lazyload").lazyload({
	placeholder: "images/placeholder.gif", // 指定src占位符
	threshold: 200, // 距离图片一定位置就触发加载
	effect : "fadeIn",  // 默认:show() 效果:fadeIn
});
</script>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对北漂的程序猿的支持。

发表评论

电子邮件地址不会被公开。 必填项已用*标注