lazyload.js是jQuery的一个插件,可以用来实现图片异步加载.

lazyload插件如何添加参数:

$("img").lazyload({
//参数添加到此位置,建议一行一个,用英文,作间隔
});

下面对lazyload.js的一些参数进行说明,供使用者做出更贴切的效果。

1,用图片提前占位

placeholder : "img/grey.gif",

参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

2,载入使用何种效果

effect : "fadeIn",

参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前开始加载

threshold : 200,

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4,事件触发时才加载

event : "click",

参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5,对某容器中的图片实现效果

container: $("#container"),

参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6,图片排序混乱时

failurelimit : 10,

参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

————————————————————————

经测试,lazyload插件在IE7,firefox,chrome中均有效,未出现网上所说只对firefox有效的情况.只是在IE中不易看到fadeIn等特效,大概是IE的Javascript执行效率太低所致.

lazyload.js参数说明的更多相关文章

  1. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  2. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  4. 前端优化之图片延迟加载(lazyload.js)

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  5. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

  6. LazyLoad.js及scrollLoading.js

    http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...

  7. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  8. 延迟加载图片插件LazyLoad.js的使用方法

    我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...

  9. lazyload.js详解

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

随机推荐

  1. react-native 启动页(react-native-splash-screen)

    用于解决iOS和Android启动白屏问题及简单的启动页面展示 下载 react-native-splash-screen yarn add react-native-splash-screen re ...

  2. 使用 JavaScript开发的跨平台音乐、书籍播放器

    代码地址如下:http://www.demodashi.com/demo/12542.html 演示效果 歌曲推荐界面 歌手搜索界面 歌词预览界面 书籍推荐界面 代码实现过程 首页代码: 'use s ...

  3. Maven学习小结

    简介:一款服务于Java的自动化构建工具 1 安装 必须已经安装了jdk且配置了环境变量,注意查看当前maven版本支持的jdk版本 配置Maven的环境变量 MAVEN_HOME PATH 使用mv ...

  4. 堆排序算法的java实现

         堆积排序(Heapsort)是指利用堆积树(堆)这种数据结构所设计的一种排序算法,可以利用数组的特点快速定位指定索引的元素.堆排序是不稳定的排序方法,辅助空间为O(1), 最坏时间复杂度为O ...

  5. Android Java 线程池 ThreadPoolExecutor源代码篇

    线程池简单点就是任务队列+线程组成的. 接下来我们来简单的了解下ThreadPoolExecutor的源代码. 先看ThreadPoolExecutor的简单类图,对ThreadPoolExecuto ...

  6. MySQL视图概述

    1.介绍 在传统关系型数据库里,视图有时也被称作虚表,是基于特定SQL结果集的虚拟数据表.在有些场合会变得很方便,例如:原有系统重构,旧的数据表A和B已经被拆分和合并到数据表C.D.F里面,为了实现平 ...

  7. Android注解支持(Support Annotations) (转)

    原文地址:http://www.flysnow.org/2015/08/13/android-tech-docs-support-annotations.html 注解支持(Support Annot ...

  8. _DataStructure_C_Impl:图的最小生成树

    #include<stdio.h> #include<stdlib.h> #include<string.h> typedef char VertexType[4] ...

  9. github入门基础之上传本地文件以及安装github客户端

    github 不会使用,参照了其他大神的博客看的,很不错,就按步骤来,大家可以看看 http://www.cnblogs.com/wangzhongqiu/p/6243840.html

  10. 安卓常用的xml控件配件的使用包含shape,declare-styleable、selector

    今天就讲我所遇到的常用到的一些通过xml文件制作的背景效果,以后用到的话就直接使用啦!哈哈,我一向就是这么懒! 接下来,就开始介绍了 1.shape的使用,可以混合使用 xml控件配置属性 andro ...