lazyload 加载

时间  2019-11-10
标签 lazyload 加载 繁體版
原文   原文链接

jQuery Lazy Load是一个基于jQuery的图片延迟加载插件，在用户滚动页面到图片以后才进行加载，其对于有较多图片的页面当中，使用图片延迟加载，可以有效的提升页面的加载速度。javascript

这里给出Lazyload相关的demo页面（插件做者制做）：html

基本功能、渐变元素、没有script的返回、水平滚动的页面、容器内的水平滚动
容器内的纵向滚动、定义延迟时间事后再加载、经过AJAX加载java

注意：在切换每一个demo页面的时候请记得清除浏览器缓存。jquery

接下来咱们说下使用jQuery Lazy Load的三要素：git

一、由于该插件创建在jQuery的存在上，因此请在</body>前加入jQuery和该插件的调用，示例代码以下：github

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>
复制代码

二、必须在image上添加data-original属性并放入原图片连接，而且在src中放入执行Lazyload未执行前所显示的图片连接，示例代码以下：windows

  1. <img data-original="images/cover.jpg" width="640" height="480">
复制代码

注意，若是你想更精确的对指定执行Lazyload的图片进行定位的话，还能够在image中添加Id或者class，示例代码以下：浏览器

  1. <img class="top" data-original="images/cover.jpg" width="640" height="480">
复制代码

三、jQuery Lazy Load的配置函数：缓存

  1. $(function() {
  2. $("img").lazyload();//对全部带有data-original的图片进行加载
  3. $("img.top").lazyload();//对全部带有data-original且属于top类的图片进行加载
  4. });
复制代码

再下面，谈下配置jQuery Lazy Load的一些值：app

阈值：百度上的解释是促发某种行为或者反应产生所须要的最低值，这里是设置当前显示部分底部或者最右边距离图片一段距离的时候开始加载开始出现的图片，这一段距离就是该值所设立的。示例代码以下：

  1. $("img").lazyload({
  2. threshold : 200
  3. });
复制代码

注意，默认值是当图片开始出如今当前显示部分的时候才开始加载。

触发方式：好比经过点击或者鼠标移动到图片上才触发Lazyload，默认是经过鼠标滚动页面到图片出现就开始加载。示例代码以下：

  1. $(function() {
  2. $("img.lazy").lazyload({
  3. event : "sporty"
  4. });
  5. });
复制代码

下面说下本文一开始给出的demo一一作个介绍：

实现定义延迟时间事后再加载的demo，示例代码以下：

  1. $(function() {
  2. $("img").lazyload({
  3. event : "sporty"
  4. });
  5. });
  6. $(window).bind("load", function() {
  7. var timeout = setTimeout(function() {
  8. $("img").trigger("sporty")
  9. }, 5000);
  10. });
复制代码

因为Lazyload默认是在一张图片彻底加载了以后才显现，那么如今给它加一个渐变的特效，示例代码以下：

  1. $("img").lazyload({
  2. effect : "fadeIn"
  3. });
复制代码

没有script的返回demo，示例代码以下：

  1. <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
  2. <noscript><img src="img/example.jpg" width="765" height="574"></noscript>
  3. //经过noscript标签让不支持JavaScript的浏览器直接显示图片
  4. <style>.lazy {display: none;}</style>
  5. //经过样式隐藏lazy类的图片
  6. <script>$("img.lazy").show().lazyload();</script>
  7. //经过JavaScript显示lazy类图片，一样放置在该插件代码下便可，一样支持添加特效等参数
复制代码

在容器内使用Lazyload：

  1. #container {
  2. height: 600px;
  3. overflow: scroll;
  4. }
  5. $("img.lazy").lazyload({
  6. container: $("#container")//仅须要定义一个容器属性便可
  7. });
复制代码

说到这里，切入一个话题——当图片并不是有序呈如今浏览器窗口的时候应该怎么办呢？

Lazyload有一个循环查找img的机制，根据html文档的布局从上往下查找，当第一个被找到的img没有显示或者加载的时候，它就会中止往下查找，相对来讲是对$("img.lazy")这个对象(组)进行顺序查找。

可是假如在页面上有用到float和position等样式来定位图片的时候，浏览器所呈现的布局跟html中的DOM(图片)顺序就相驳了，从而致使某种状况下img出如今当前可显示页面上却没法显示或者加载的问题。还有就是由于其循环查找img的机制，在Lazyload找到第一个未显示的img时，其查找就被停止，从而没法往下遍历。

接着这儿给出的方案就是failure_limit属性，请看如下示例代码：

  1. $("img").lazyload({
  2. failure_limit : 10
  3. });
复制代码

其中它的做用是让Lazyload查找到第10个未显示的img处，这家伙主要是用在图片多且布局复杂的页面，若是你的页面真的太过于“变态”的话请努力上调该值。

说到这里（真的词穷了），咱们再说说一个问题——若是遇到不可见的图片的时候应该怎么办？

小觉这儿所说的不可见的图片所表明的是那些出如今当前显示屏幕却没有 :visible 属性的图片，对此Lazyload的默认作法是忽视掉这些没有 :visible 属性的图片。因此对此能够对函数配置skip_invisible为false来从新让Lazyload遍历到这些不可见的图片，可参考如下示例代码：

  1. $("img").lazyload({
  2. skip_invisible : false
  3. });
复制代码

注意：Webkit内核浏览器在img上没有定义图片宽和高的状况下会报告这类不可见图片，这将致使只有在你滚动鼠标的一会才可以显示图片，固然这也得基于你已经对其将skip_invisible设置为false。

说到这里（实在是不知道怎么衔接了），咱们再说说又一个问题，Lazyload能否应用到背景图片中呢？

答案是能够的，默认待其因页面滚动而显现的时候就会加载，这和Lazyload基本特性相同，并且这里有两种方法使用：

其一是用在没有图片的元素上，且其会自动改变background-image样式为data-original上的连接，实例代码以下：

  1. <div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
  2. $("div.lazy").lazyload({});
复制代码

其二是用在img占位符上，且在该占位符上将失去一个http请求，示例代码以下：

  1. <img class="lazy" data-original="img/example.jpg" width="765" height="574">
  2. $("img.lazy").lazyload();
复制代码

注意：如今只有Lazyload 1.9.0及其以上版本支持在背景图片上使用延迟加载。

说到这里（……），再说下Lazyload的两个事件，即appear和load，同时这两个时间又含有两个参数，即elements_left和settings，下面一一说明一下：

  1. appear：当图片出如今当前视区，但尚未进行加载以前会被执行。
  2. load：当图片已经被加载时。
  3. elements_left：指的是图片由左边开始进行加载。
  4. settings：将所设置的内容传向Lazyload。
复制代码

可能上述文字有点难以明白，如下为一示例代码：

  1. $("img.lazy").lazyload({
  2.     appear : function(elements_left, settings) {
  3.         console.log(this, elements_left, settings);
  4.     },
  5.     load : function(elements_left, settings) {
  6.         console.log(this, elements_left, settings);
  7.     }
  8. });
复制代码

上述代码所执行的是让lazy类的图片在出现的时候由左向右加载，而后在加载全部图片时也是由左向右加载，啊！！我也不懂，但愿懂的朋友可以纠正下，度娘和谷歌都没法给出准确的回应。

说到这里（= =），让咱们再说说一个参数atta_attribute，它的做用是能够自定义original 图片属性，下面给出示例代码的话你们应该懂了：

  1. <script>
  2. $("img.lazy").lazyload({
  3.     data_attribute  : "kitten"
  4. });
  5. </script>
  6. <img src="/img/placeholder.gif" data-kitten="/img/real-image.png" />
复制代码

最后小觉也本身写了一串代码来增强Lazyload，固然小觉的水平不可能让其支持其全部功能，这里小觉所要达到的目的是自动将原img中的src真实地址放置于data-original中，而后src中定义未加载真实图片前的图片地址。示例代码以下：

  1. $("img").each(function () {
  2.     var that = $(this);
  3.     var re=/(.+?.(jpg|bmp|png|jepg|gif))/i;
  4.     href = that.attr("src");
  5.     if (re.test(href)) {
  6.         that.attr("data-original",href);//转移原图片中的真连接到data-original
  7.         href =href.replace(re, "123.jpg");//定义未加载前的图片
  8.         that.attr("src",href);
  9.     }
  10. });//配合jQuery Lazy Load修改指定图片连接函数，放置于Lazyload配置函数以前
  11. $(function() {
  12.     $("img").lazyload();
  13. });//jQuery Lazy Load配置函数
复制代码

关于Lazyload的下载（可直接调用连接，最新版本都出如今该连接）：

最新的Lazyload原始版本：https://raw.github.com/tuupola/j ... /jquery.lazyload.js

最新的Lazyload压缩版本：https://raw.github.com/tuupola/j ... ery.lazyload.min.js

已经在Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on windows and Safari 5.1 on iOS 5 both iphone and ipad等地进行测试完善。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程