jquery-懒加载插件
2024-10-15 23:02:35
在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,
系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。
从此可知,再好的网站,再炫的网站,只要在网页打开速度方面缓慢,用户都会对这个网站订下一个差评的分数。
往往拉低网站性能都是图片过多或过大方面,所以一般解决这个问题,网站性能都会大大的提高。
而jquery.lazyload.js这款插件可以解决这方面的问题,而且它简单易懂。
以下为它的简单使用代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<style>
img{
width:200px;
height: 200px;
}
li .list{
background-size: contain;
width: 200px;
height: 200px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>1<img class="lazy" data-original="img/1.png" alt=""></li>
<li>2<img class="lazy" data-original="img/2.jpg" alt=""></li>
<li>3<img class="lazy" data-original="img/3.jpg" alt=""></li>
<li>4<img class="lazy" data-original="img/4.jpg" alt=""></li>
<li>5<img class="lazy" data-original="img/5.jpg" alt=""></li>
<li>6<img class="lazy" data-original="img/6.png" alt=""></li>
<li>7<div class="list lazy" data-original="img/7.jpg"></div></li>
</ul> <script>
console.log($("img.lazy").is("img"));
$(".lazy").lazyload({effect : "fadeIn"});
</script>
</body>
</html>
具体使用:传送门
这款插件是依赖于jquery的。
这个插件是可以背景加载的,只要是图片加载,就可以懒加载。
这个插件的编写时使用trigger()自定义事件的,贯穿整个插件。
核心代码:
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.one("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed); self.loaded = true; /* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp); if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});
最新文章
- NOI2001|POJ1182食物链[种类并查集 向量]
- SQL2014 error 40 ( Microsoft SQL Server, 错误2)
- 取数据的前N行
- JSON数据行转列的应用
- 仿AS语法来写HTML5—第1章,显示一张图片
- JS实现滚动条滚到页面距离底部300px时执行事件的方法
- jquery jsonp实现跨域
- TCP建立连接的3次握手和关闭连接的4次挥手
- 新手上路Tomcat 7.x和JDK的配置
- 如何使用记事本编程,并生成exe
- Zookeeper的安装配置及基本开发
- Django REST framework+Vue 打造生鲜超市(十三)
- 从协议入手,剖析OAuth2.0(译 RFC 6749)
- Learning-Python【16】:模块的导入使用
- [转]ionic3项目实战教程三(创建provider、http请求、图文列表、滑动列表)
- python里面 循环明细对比 相同人员明细,生成同一订单里面
- BZOJ.3598.[SCOI2014]方伯伯的商场之旅(贪心 数位DP)
- day 50 Java Script 学习
- 批量增加Linux系统账号、重置账号密码、FTP账号批量测试
- 教你ABBYY FineReader 12添加图像的技巧