jQuery图片懒加载

最新推荐文章于 2023-08-05 14:21:04 发布

ZzTiAmo

最新推荐文章于 2023-08-05 14:21:04 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/ZzTiAmo/article/details/100008992

版权

jQuery图片懒加载
1，要引入两个jQuery文件，一个是 src="./jquery-1.11.0.min.js"，另一个是src="./jquery.lazyload.min.js"，顺序不能颠倒。
2，要设置图片的宽高以及data-original，再给其设置一个类名
3 effect: “fadeIn”,//图片显示时淡入效果
　placeholder: “images/default.png”,//没有加载图片时的临时占位符
　threshold: 200,　//图片在距离屏幕 200 像素时提前加载　
　event:“click”, //将图片加载放进click事件中
　skip_invisible : false//加载隐藏的图片

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>懒加载</title>
	<script src="./jquery-1.11.0.min.js"></script>
	<script src="./jquery.lazyload.min.js"></script>
	<style>
		.box{height: 1400px;width: 200px;border: 1px solid #000;}
		.lazy{width: 200px;height: 200px;}
	</style>
</head>
<body>
	<div class="box">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original ="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
		<img data-original="https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-677210b4c6871c9a-c9b2a211acd201d81e89d0d04945e472.jpg" alt="" class="lazy">
	</div>
	<script>
		$(function(){
			$(".lazy").lazyload({
				effect: "fadeIn"
			});
		});
	</script>
</body>
</html>