[js开源组件开发]图片懒加载lazyload

最新推荐文章于 2025-09-10 16:27:04 发布

weixin_30254435

最新推荐文章于 2025-09-10 16:27:04 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： git 前端 ViewUI

原文链接：http://www.cnblogs.com/tianxiangbing/p/lazy-load.html

本文介绍了一种前端优化技术——图片懒加载（lazy load），通过在图片进入可视区域时才加载真实资源来减轻页面初始加载负担。文章提供了具体的实现案例及配置选项说明。

图片懒加载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指向当前对象

转载于:https://www.cnblogs.com/tianxiangbing/p/lazy-load.html