图片的懒加载以及jquery.lazyload.js的使用实例-tutorial js-php.cn

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

Salin selepas log masuk

具体使用

1.页面引入方式

由于延迟加载lazyload是依赖jquery的，所有页面需要引入jquery，如下：

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

Salin selepas log masuk

基本写法：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

Salin selepas log masuk

其中的data-original 属性存放真实的图片url路径。

小贴士：你必须设置图片的宽度或者高度在css中，否则插件可能不能正常工作。

设置Threshold

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置 threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载。

$("img.lazy").lazyload({
    threshold : 200});

Salin selepas log masuk

设置事件触发加载

事件可以是任何 jQuery 事件, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img.lazy").lazyload({
    event : "click"});

Salin selepas log masuk

当然，你也可以用下面的这种方式实现延迟加载：

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Salin selepas log masuk

即是页面加载完成 5 秒后,再去执行图片的懒加载。

延迟加载效果

当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果：

$("img.lazy").lazyload({
    effect : "fadeIn"});

Salin selepas log masuk

不支持JavaScript的浏览器的使用方式

几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写