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. Kali Linux 2.0: 安装之后的操作

    1. 添加官方软件库 1) 编辑/etc/apt/sources.list leafpad /etc/apt/sources.list 2) 用#注释掉原有的内容,并添加下述内容: # Regular ...

  2. CentOS7安装Puppet+GitLab+Bind

    添加Puppet官方源 rpm -Uvh https://yum.puppetlabs.com/puppetlabs-release-el-7.noarch.rpm 安装Puppet yum -y i ...

  3. JSTL时间比较,jstl日期比较,jsp比较时间

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  4. PS之火焰铁锈字

    效果图 素材一:将下图在PS中打开,选择菜单:编辑>定义图案,命名后关闭图案 素材二 1.新建如下画布 2.将素材二拖入新建好的画布(使用移动工具) 3.先将文字图层复制4次(ctrl+J)并且 ...

  5. (转)xml序列化

    在 .NET Framework 中提供两种串行化方法,一种是二进制法,另一种是xml串行化. 序列化是将对象状态转换为可保持或传输的格式的过程,xml序列化是将对象的公共字段和属性序列化为xml流. ...

  6. C#缓存处理

    第一种方式: 在ASP.NET中页面缓存的使用方法非常的简单,只需要在aspx页的顶部加这样一句声明即可: <%@ OutputCache Duration="60" Var ...

  7. 在.Net中进行跨线程的控件操作(上篇:Control.Invoke)

    本文的重点在于介绍如何在多线程编程中,从非UI线程上访问界面中的控件.有过多线程编程经验的人都知道,当我们在非UI线程上试图给一个界面中的控件赋值的时候,比如说label的Text属性,系统会抛出一个 ...

  8. 解决UICollectionView ReloadData闪一下(隐式动画)

    方式一: [UIView setAnimationsEnabled:NO]; [collectionView performBatchUpdates:^{ [collectionView reload ...

  9. 【转】关于C的未定义行为

    关于C的未定义行为 转自:http://www.guokr.com/blog/471312/ 对于C的初学者来说,被要求做下面的这种题目真的是脑残的不能再脑残的行为.但是很多C初级教程——居然都有这样 ...

  10. web版扫雷小游戏(四)

    ~~~接上篇,游戏的主体框架完成了,接下来我们对游戏中存在的两个主要实体进行分析,一个是雷点类BombObject(节点对象),一个是节点对象对应的图片对象BombImgObject,根据第一篇的介绍 ...