图片延迟加载jQuery插件lazyload的使用方法详解

最新推荐文章于 2019-10-18 15:52:30 发布

anshi2703

最新推荐文章于 2019-10-18 15:52:30 发布

阅读量168

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/520yang/articles/4382695.html

版权

$(“img.lazy”).lazyload(); lazyload.js 高级使用方法：
下面部分来自官方文档，将官方文档进行了一下简单的翻译。更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用

户关掉了支持 javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 javascript 的支持，我们的图像就无法显示出来。
应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 javascript，直接显示图像。对现有图像，隐藏处理，使用 show()方法触发显示。这样，如果浏览器不支持 javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：
<img src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″ heigh=”480″></noscript>

默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。例如 $(“img.lazy”).lazyload({ effect : “fadeIn” });
fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： effect demo page 把图像插入某个容器
大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果：vertical

#container { height: 600px; overflow: scroll; }

$(“img.lazy”).lazyload({ container: $(“#container”) });
加载不可见图像
有部分图像是不可见的，我们对其加上类似 display：none 等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible 设置为 false
$(“img.lazy”).lazyload({ skip_invisible : false })

Lazy Load 插件原理

修改目标img元素的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把网页可视区域中的img的src属性还原然后加载图片，从而制造了一种缓冲加载的效果。代码引入方法：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
    $(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "images/grey.gif", //加载图片前的占位图片
         effect      : "fadeIn" //加载图片使用的效果(淡入)
    });
    });
</script>

但是现在，很多Javascript大牛分析得出，这个插件其实并没有真正的起到缓加载的作用。确实是这样，官方也已经给出了说明和解决方法了。

其实原因就在于在新版的浏览器中，即使我们删除了Javascript控制的src属性，浏览器仍然会去加载这个图像。

那么我们该怎么解决呢？其实也很简单，需要直接修改HTML的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。比如：

<img src="img/grey.gif" data-original="img/example.jpg" >

当然，在上面的代码中我们把页面内的所有图片都延迟加载了，但有些时候我们并不希望这样，因为有些图片并不想然他们延迟加载，那么我们可以这样只需做：

如只缓冲加载类main下的图像

$(“.main img”).lazyload({
placeholder : “images/grey.gif”,
effect : “fadeIn”
});

加载挂载有lazy类的图像：

$(“img.lazy”).lazyload({
placeholder : “images/grey.gif”,
effect : “fadeIn”
});

其他的以此类推，适当做一下选择器调整就行了。

lazyload.js 高级使用方法：

下面部分来自官方文档，将官方文档进行了一下简单的翻译。

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。

应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。

<img src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″ heigh=”480″></noscript>

对现有图像，隐藏处理，使用 show()方法触发显示。