ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

lazy加载

2021-12-16 21:03:48  阅读:83  来源: 互联网

标签:lazy 加载 effect lazyload 默认值 event 图片


先引入

$(function () { $("img.lazyload").lazyload({ threshold: 200, effect: "fadeIn" }); });

.lazyload()里面带了两个参数,他们分别代表什么意思,还有没有其他的参数呢?

threshold: 200,    // 当距离图片还有200像素的时候,就开始加载图片。

effect: "fadeIn",  // 控制显示图片的效果,fadeIn的效果淡入动画。

container: $("#container")  // 父容器。指定哪个父容器中的图片延迟加载。

event: "click",     // 默认的触发事件是滚动,当你滚动的时候,就会检查然后加载。
                       你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。

// event: 'scrollstop' // 当页面中存在上百张,甚至数百张图片时,建议使用 scrollstop 事件。
                       scrollstop 介绍地址:https://j11y.io/javascript/special-scroll-events-for-jquery

具体参数说明

/*
* container:window  

* event:  默认值 'scroll',另外还有scrollstop,sporty,click

* effect: 默认值 'show',加载使用的动画效果。
          如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。

* effectspeed: 默认值 undefined,动画时间。
               作为 effect 的参数使用:effect(effectspeed)

* data_attribute: 默认值 'original',真实图片地址的 data 属性后缀

* threshold: 默认值 0,灵敏度。
             表示当图片出现在显示区域中的立即加载显示;
             设为整数表示图片距离 x 像素进入显示区域时进行加载;
             设为负数表示图片进入显示区域 x 像素时进行加载。

* failure_limit: 默认值 0,容差范围。
                 页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,
                 默认找到第 1 张不可见的图片时,就终止遍历。
                 因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,
                 通过该值来扩大容差范围。

* skip_invisible: 默认值 true,跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。

* appear: 默认值 null,图片加载时的事件 (Function),
          有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。

* load: 默认值 null,图片加载后的事件 (Function),
        有 2 个参数,同 appear 。
*
* */

注1: 当你指定了哪个父容器中的图片做延迟加载时,你需要给这个父容器写一写样式,例如:

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

而jQuery代码可以像下面这样写:

$("img.lazyload").lazyload({
    container: $("#container")  
});

当浏览器不支持 JavaScript 时的降级处理

<img class="hide" src="清晰度较低或者loading的gif图片.jpg" data-original="example.jpg" width="765" height="574">
<noscript><img src="./img/真实的图像.jpg" width="765" height="574"></noscript>

<!--noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。
对现有图像,隐藏处理,使用 show() 方法触发显示。-->

上面的class="hide"我们需要给它添加一行样式:

.hide {
    display: none;
}

这个时候,我们的jQuery代码可以像下面这样写:

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

另一个使用场景:当前显示区域内的图片先进行加载,显示区域外的图片延迟5秒之后再加载

这个地方需要用event:'sporty'
jQuery的具体代码如下:

$(function(){
    $('img').lazyload({
        effect:'fadeIn',
        event:'sporty'
    });
});

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


标签:lazy,加载,effect,lazyload,默认值,event,图片
来源: https://www.cnblogs.com/youmenzi/p/15699943.html

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有