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. C#TreeView节点选中后失去焦点时改变节点背景色

    C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后           ...

  2. mysql explain分析

    通过explain可以知道mysql是如何处理语句,分析出查询或是表结构的性能瓶颈.通过expalin可以得到: 1. 表的读取顺序 2.表的读取操作的操作类型 3.哪些索引可以使用 4. 哪些索引被 ...

  3. linux 终端输出颜色

    在Linux终端下调试程序时,有时需要输出大量信息.若能控制字体的颜色和显示方式,可使输出信息对比鲜明,便于调试时观察数据. 终端的字符颜色由转义序列(Escape Sequence)控制,是文本模式 ...

  4. 5-5 ES6的模块化的基本规则或特点

    一.AMD, CMD, CommonJs和ES6对比 1.AMD ==> 是RequireJS在推广过程中对模块定义的规范化产出 // RequireJS定义标准, 导步加载依赖, 依赖前置 d ...

  5. 关于spring中的事件体系

    在客户这边上班,平时做开发的时候用到了一个客户自己写的一个开发框架,和spring类似,就是功能少一点,提供了依赖注入,事件体系,任务执行等常用的功能,还提供了一个桥接器,可以把spring中的bea ...

  6. 理解 ARC 下的循环引用

    本文由 伯乐在线 - nathanw 翻译,dopcn 校稿.未经许可,禁止转载!英文出处:digitalleaves.com.欢迎加入翻译组. ARC 下的循环引用类似于日本的 B 级恐怖片.当你刚 ...

  7. 7.18 python进程间数据共享

    # 管道# 数据共享 Manager# 进程池和回调函数 ! # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018/7/18 ...

  8. Centos7 安装hive

    安装hive 配置hive 在hdfs中新建目录/user/hive/warehouse 首先启动hadoop任务 hdfs dfs -mkdir /tmp hdfs dfs -mkdir /user ...

  9. CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  10. 基本类型互相之间转化可以用Covent类来实现。

    一.C#类型的转换 在c#中类型的转换分两种:显式和隐式,基本的规则如下: 1.基类对象转化为子类对象,必须显式转换,规则:(类型名) 对象.2.值类型和引用类型的转换采用装箱(boxing)或拆箱( ...