使用jquery.lazyload进行图片懒加载

最新推荐文章于 2022-07-31 15:22:34 发布

DexterLien

最新推荐文章于 2022-07-31 15:22:34 发布

阅读量587

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/lpwmm/article/details/78533144

版权

前端开发专栏收录该内容

42 篇文章 1 订阅

订阅专栏

首先需要引入jquery.js和jquery.lazyload.js,然后对<img>标签进行修改,将原来的src属性改为data-original设置图片地址,最后加入初始化js代码即可,最终示例代码如下:

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
	$(function(){
		$("img.lazy").lazyload({
			effect:"fadeIn",	//载入效果使用渐变
			threshold:100,		//离页面还有100px时开始加载
			container:"$("#container")	//对指定容器内的图片实现效果,lazyload默认对整个浏览器拉动滚动条的时候生效,建议不要指定容器,容易导致lazyload无效
		});
	});
</script>
<div>
	<img class="lazy" data-original="xxx/xx.jpg">
	<img class="lazy" data-original="xxx/xx.jpg">
	<img class="lazy" data-original="xxx/xx.jpg">
</div>