zoukankan      html  css  js  c++  java
  • [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload

    前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型。它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷。所以建议src里放置模糊小图或正在加载中的图,不要置空为好。

    lazy-load

    图片懒加载 例子见DEMO ,它的git地址是:git

    使用方法案例:

    <img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" alt="">
    $('img').LazyLoad({
        container: window,
        event:'scroll',
        effect: 'show',
        effectArgs: 'slow',
        loadImg:'loading.gif',
        load: null,
        offset: 0
    });
    

      

    或者

    var obj = new LazyLoad();
    obj.init({
        elements:'img',
        container: window,
        effect: 'show',
        event:'scroll',
        effectArgs: 'slow',
        loadImg:'loading.gif',
        load: null,
        offset: 0
    });

    属性和方法

    elements:

    dom的集合,一般为需要懒加载的img标签集合,如果是动态加载的内容,请在html加载完成之后再调用init

    init:

    初始化方法

    container: window

    触发滚动条的容器,默认为window,可不传

    event:

    容器触发事件,默认为scroll

    effect:

    触发的事件方法,默认为 show

    effectArgs

    要给effect传的参数,可不传

    loadImg

    加载等待时显示的图片地址,默认是一个1pxx1px的图

    offset:

    与图片的差值,默认0

    load:function(img)

    加载完成的回调,this指向当前对象
  • 相关阅读:
    ROSS仿真系统简单教程
    python小练习1.1
    c语言文件I/O 文件读取和写入
    Python 学习笔记 多线程-threading
    parsec(The parsec benchmark suit )使用教程
    Checkpoint/Restore In Userspace(CRIU)使用细节
    Checkpoint/Restore in Userspace(CRIU)安装和使用
    考研总结
    北理计算机复试经验
    PAT(A) 1075. PAT Judge (25)
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/lazy-load.html
Copyright © 2011-2022 走看看