1.引入

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2.img处理

<img class="lazy" data-original="img/example.jpg">

3.调用方法,配置参数

$(document).ready(function(){
$("img.lazy").lazyload({
effect : "fadeIn",
failure_limit : 1000,
threshold : 2000 // 默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载
});
});

jquery.lazyload的使用的更多相关文章

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

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

  2. 图片懒加载jquery lazyload

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...

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

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

  4. jQuery.lazyload

    Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...

  5. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  6. jquery懒加载jquery.lazyload.js

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

  7. jQuery lazyload 懒加载

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

  8. jQuery.lazyload使用及源码分析

    前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...

  9. jQuery.lazyload详解

    <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...

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

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

随机推荐

  1. 使用passenger在Centos7部署Puma+Nginx+Ruby on Rails

    安装ruby环境 RVM(ruby版本管理工具)安装 gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A170311 ...

  2. opencv多平台环境搭建及使用

    windows平台: 一.安装opencv 下载地址:http://opencv.org/ 依据平台下载相应源码包 安装流程就是一个解压过程.不再赘述. 解压完,效果图: 源码树结构参看http:// ...

  3. fseek()

    原文地址:fseek()作者:xiaoxin 意思是把文件指针指向文件的开头 fseek   函数名: fseek   功 能: 重定位流上的文件指针   用 法: int fseek(FILE *s ...

  4. List和ArrayList,LinkList的区别

    接口 List<E> 是一个接口: ArrayList<E> 是一个类:是一个实现了List接口的类,因此可以List里面定义的所有的方法都实现了. 1.ArrayList是实 ...

  5. javascript-图片横向无缝隙滚动(可在服务器运行)

    前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...

  6. “jni.h”: No such file or directory

    VS2010解决方案: 进入 “包含目录“ 方式: 右键项目属性页-> 配置属性->VC++目录->包含目录 在”包含目录“中编辑 添加以下路径: C:\Program Files\ ...

  7. list集合中指定字段去重

    在开发中,有时会需要指定字段去重,以下为实现方法: 假设有个房地产权的类,其中宗地代码ZDDM值重复,而我们在前端页面显示时,只需要一条数据,因为公共字段都一样: IEqualityComparer需 ...

  8. 【BZOJ3456】【CDQ分治+FNT】城市规划

    试题来源 2013中国国家集训队第二次作业 问题描述 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得 ...

  9. C#程序中:如何删除xml文件中的节点、元素。

    C#中动态的清理xml文件中的垃圾信息是程序员必会的哦.这就像数据库一样,不会清理数据怎么可以呢?其实xml文件就可以用作一个小的数据库,存储一些简单的信息.所以,用C#程序实现xml文件的增.删.改 ...

  10. cx_Oracle使用方法一

    cx_Oracle使用方法 正确安装好cx_oracle之后,要使用它来连接到oracle数据库进行操作,具体应该分3步走: 第一步:导入cx_Oracle ,建立连接 >>> im ...