图片懒加载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:
});

属性和方法

elements:

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

init:

初始化方法

container: window

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

event:

容器触发事件,默认为scroll

effect:

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

effectArgs

要给effect传的参数,可不传

loadImg

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

offset:

与图片的差值,默认0

load:function(img)

加载完成的回调,this指向当前对象

[js开源组件开发]图片懒加载lazyload的更多相关文章

  1. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  2. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  3. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  4. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  5. js 函数的多图片懒加载(lazy) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...

  6. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  8. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  9. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

随机推荐

  1. 使用NSKeyedArchiver归档

    将各种类型的对象存储到文件中,而不仅仅是字符串.数组和字典类型,有一种更灵活的方法.就是利用NSKeyedAarchiver类创建带键(keyed)的档案来完成. Mac OS X从版本10.2开始支 ...

  2. Android之线程回掉更新ui

    一:工作线程中的回掉更新UI public class MainActivity extends AppCompatActivity { private int i; private Callback ...

  3. mac x Yosemide(10.10) 下安装 jdk 1.7 (jdk 1.8)的方法

    当我们想在mac x yosemide 系统中更新jdk到1.7(1.8)的时候,会弹出下面的错误提示 解决这个问题的办法如下: 1.下载 好jdk 1.7(1.8) 地址:http://www.or ...

  4. android手机出现sqlite3 not found的解决方法

    解决方法如下: 1.如果/system目录为不可读写的,需要挂载为读写: C:\Users\easteq>adb shell root@android:/ # mount -o remount, ...

  5. mark:如何使用FileZilla连接虚拟机上的Fedora

    1. 下载FileZilla 2. 在虚拟机上安装SSH,http://linuxconfig.org/how-to-install-start-and-connect-to-ssh-server-o ...

  6. CentOS下Redis服务器安装配置

    说明: 操作系统:CentOS 1.安装编译工具 yum install wget  make gcc gcc-c++ zlib-devel openssl openssl-devel pcre-de ...

  7. 短日期比较 js

    function compareDate(startDate, endDate) { var arr = startDate.split("-"); var starttime = ...

  8. AssetBundle系列——游戏资源打包(二)

    本篇接着上一篇.上篇中说到的4步的代码分别如下所示: (1)将资源打包成assetbundle,并放到自定目录下 using UnityEditor; using UnityEngine; using ...

  9. SerializationUtility

    public static T LoadFromXml<T>(string fileName) { FileStream fs = null; try { XmlSerializer se ...

  10. Java向前引用容易出错的地方

    所谓向前引用,就是在定义类.接口.方法.变量之前使用它们,例如, class MyClass { void method() { System.out.println(myvar); } String ...