jQuery 插件 图片懒加载
图片懒加载 作用 : (图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域，再显示图片。
我们使用jquery插件库EasyLazyload。 注意，此时的 js 引入文件和js调用必须写到DOM元素 (图片) 最后面
在这个网址搜索图片懒加载 : (https://www.jq22.com/) EasyLazyload.min.js
img 的 src 属性 必须改为 data-lazy-src
代码示例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 600px;
height: 400px;
margin: 0 auto;
display: block;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<img data-lazy-src="img/公司2.jpg">
<img data-lazy-src="img/公司3.jpg">
<img data-lazy-src="img/公司4.jpg">
<img data-lazy-src="img/公司5.jpg">
</div>
<script src="../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
</body>
</html>
