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. ubuntu16.04 : 4: [: y: unexpected operator

    Ubuntu16.04 执行行脚本出错 在使用sh 执行脚本 出错标志 : 4: [: y: unexpected operator 原因:sh是连接到dash的,又因为dash跟bash的不兼容所以 ...

  2. 【原创教程】鲸吞HTML

    首先,我们的angularJS课程分为三大模块: HTML/CSS/JS基础. angularJS详解. angualrJS的一些实用框架讲解. 其中,第一大模块的对象是对前端开发技术有点了解但不熟悉 ...

  3. Linux - 引用

    双引号 如果把文本放在双引号中,那么 shell 使用的所有特殊字符都将失去它们的特殊含义,而被看成普通字符.字符 "$"(美元符号)."\"(反斜杠).&qu ...

  4. “System.Transactions.Diagnostics.DiagnosticTrace”的类型初始值设定项引发异常。

    今天在项目中用log4net,App.config文件中增加了configSections节点,程序运行报错“System.Transactions.Diagnostics.DiagnosticTra ...

  5. winfrom面向对象1

    1:面向对象的技术概论 要学习好面向对象,我们应该从三个问题入手: 1.什么是面向对象? 2.为什么要面向对象? 3.该怎么面向对象? 对象的定义是人们要进行研究的任何事物,从最简单的整数到复杂的飞机 ...

  6. WPF 窗体中的 Canvas 限定范围拖动 鼠标滚轴改变大小

    xaml代码: <Canvas Name="movBg"> <Canvas.Background> <LinearGradientBrush EndP ...

  7. Lucene5.x 中文 同义词

    查询好好多资料,英文同义词好好的,中文就不行,多谢网友支持,拼接了好多代码,然后修改了一些,不足之处,多谢指正. 直接上代码吧,在代码中了解怎么分词的最好 1,创建分词引擎 public interf ...

  8. ubuntu下提示/boot空间不足,解决办法

    在安装 ubuntu的时候 , 给/boot文件目录分配空间的时候,是100M,/boot可以单独分成一个区,也可以不单独分,在/(根目录)下也会自动为其创建一个boot目录.顺便提一下,linux分 ...

  9. SQL Server2012连接SQL Server2000完美解决方案

    在SQL Server2012中连接其他SQL Server数据库时可以使用以下代码: exec sp_addlinkedserver 'ITSV', '', 'SQLOLEDB', 'serveri ...

  10. ubuntu npm 私有库搭建 (npmjs.org 官方版本)

    目标 npm.xxx.com 安装和推送nodejs包 npmui.xxx.com 管理已经推送的nodejs包   安装 couchdb   https://launchpad.net/~couch ...