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. 关于array.sort(array,array)

    // 基于第一个 System.Array 中的关键字,使用每个关键字的 System.IComparable 实现,对两个一维 System.Array // 对象(一个包含关键字,另一个包含对应的 ...

  2. Visual Studio for Mac离线安装教程

    Visual Studio for Mac离线安装教程 可以在线安装,也可以离线安装(本次安装博主使用离线,在线安装失败了) 据说翻个墙就可以,有条件的就翻吧 没条件的我于是选择离线安装………… 离线 ...

  3. css3整理--border-image

    border-image语法: border-image : none | <image> [ <number> | <percentage>]{1,4} [ / ...

  4. 题目1442:A sequence of numbers(数列计算以及二分求幂运用)

    题目链接:http://ac.jobdu.com/problem.php?pid=1442 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  5. angularjs笔记《二》

    小颖最近不知怎么了,老是犯困,也许是清明节出去玩,到现在还没缓过来吧,玩回来真的怕坐车了,报了个两日游得团,光坐车了,把人坐的难受得,去了也就是爬山,回来感觉都快瘫了,小颖去的时候还把我家仔仔抱着一起 ...

  6. [原]RHEL7/Centos 7将网卡名称改为eth0

    ======问题===== rhel的网卡为enoxxxxxxxxx =====原因====== 从CentOS/RHEL7起,可预见的命名规则变成了默认.这一规则,接口名称被自动基于固件,拓扑结构和 ...

  7. Packetbeat协议扩展开发教程(1)

    Packetbeat ( https://www.elastic.co/products/beats/packetbeat )是一个开源的网络抓包与分析框架,内置了很多常见的协议解析,如HTPP.My ...

  8. iOS开发过程中使用Core Data应避免的十个错误

    原文出处: informit   译文出处:cocoachina Core Data是苹果针对Mac和iOS平台开发的一个框架,主要用来储存数据.对很多开发者来说,Core Data比较容易入手,但很 ...

  9. java常用数据格式转化,类似数据库group by cube rollup

    java常用数据格式转化,类似数据库group by cube rollup单循环一条sql返回格式如:List<Map<String, List<Record>>> ...

  10. js模拟点击打开超链接

    js模拟点击打开超链接,页面上有一些锚文本,如果用 JS 批量在新窗口打开. jquery示例: <div class="link"> <a href=" ...