1、引用js

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

2、需要加载的图片写成以下的形式:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">
或者: <img class="lazy" data-original="img/example.jpg"  src="/Content/images/home/nopic_shop.png" width="640" height="480"> 最下面的是有默认图的。建议用下面的

3、在要加载的页面,加上js

$(function() {
$("img.lazy").lazyload();
});

我一般使用下面有效果的模式:

//加载图片
$("img.lazy").lazyload({
effect: "fadeIn"
});

更多需求文档,请参考官方的介绍:

http://www.appelsiini.net/projects/lazyload

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. 原生js(一)

    Element对象有以下重要属性: 1.style. a) Element的css样式 b) 可以通过elem.style.backgroundColor = "red"的形式才动 ...

  2. Microsoft Security Essentials

    https://support.microsoft.com/zh-cn/help/18900/consumer-antivirus-software-providers-for-windows   适 ...

  3. JVM垃圾收集器组合--各种组合对应的虚拟机参数实践

    前言 相信很多人都看过下面这张图,(来自<深入理解Java虚拟机:JVM高级特性与最佳实践>) 在学完几种垃圾收集器类型及组合后,打算看看实际中程序用到的垃圾收集器. 但是在jconsol ...

  4. javascript prototype学习

    function foo(a, b, c) { return a*b*c; } alert(foo.length); alert(typeof foo.constructor); alert(type ...

  5. 关于hp proliant sl210t服务器远程iLO接口的管理配置

    提到hp proliant sl210t服务器,首先得提到HP ProLiant SL2500,HP ProLiant SL2500 可扩展系统提供了 一个非常密集的解决方案,可在标准 2U 机箱最多 ...

  6. 关于virgo-tomcat-server-3.6.0.RELEASE配置文件修改说明

    Virgo项目Web服务器是EclipseRT项目的一部分,是一个完全模块化的Java运行时. Virgo自身就是设计为在标准OSGi框架实现(Equinox)之上的一个OSGi bundle集合. ...

  7. Unity3D笔记 英保通一

    一.材质和着色器 1.材质和着色器紧密的联系,其中材质相当于是一个框架,而着色器就是框架中中的内容.在材质框架中可以选择不同的Shader并调节不同的 属性 Material和Physic Mater ...

  8. iOS - ipa安装包大小优化

    在App Store上显示的下载大小和实际下载下来的大小,我们通过下表做一个对比: iPhone型号 系统 AppStore 显示大小 下载到设备大小 iPhone6 10.2.1 91.5MB 88 ...

  9. Linux:file命令显示自定义文件类型

    file 命令可以查看文件类型信息,原理见: 非常Linux-file命令与magic file 修改 /ect/magic 文件后,可用 file 命令显示自定义文件类型信息. man magic ...

  10. 【紫书】BigInteger 高精度类型 原书上有一个bug:A+B!=B+A

    存个代码 struct BigInterger { static const int BASE = 1e8; ; vector<int> s; BigInterger() { *this ...