首页 > 代码库 > jquery-懒加载插件
jquery-懒加载插件
在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)); } });
jquery-懒加载插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。