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. guzzle http异步 post

    use GuzzleHttp\Pool;use GuzzleHttp\Client;//use GuzzleHttp\Psr7\Request;use Psr\Http\Message\Respons ...

  2. php strpos(), stripos(),strrpos(), strripos()的区别

    strpos(), 左边开始,字符出现第一个位置,区分大小写: stripos(),不区分大小写: strrpos(), 左边开始,字符出现,最后一个位置,区分大小写: strripos()不区分大小 ...

  3. vscode 修改(自定义)插件的快捷键

    简单的使用了一下vscode,已经感受到了它的强大. 修改插件的快捷键: 1.快捷键command+k 按完之后再按command+s,弹出一个快捷键列表(code->首选项->键盘快捷方 ...

  4. 自定义vue全局组件use使用

    自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...

  5. 2-2 vue环境搭建以及vue-cli使用

    一.vue多页面应用文件引用 1.官网拷贝: <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...

  6. 安装Windows Server 2012 R2提示"unable to create a new system partition or locate an existing system partition"解决方法

    重新安装Windows Server 2012 R2,把原来SSD分区全部格式化重建,用U盘启动安装时提示如下: "Setup was unable to create a new syst ...

  7. 使用正则表达式来截取nginx中的内置变量

    nginx 中的内置变量都可以通过 if 指令 + 正则表达式来进行截取,截取之后的结果通过正则表达式的分组来进行引用 比如:从请求中传过来的一个名为 ssl_client_s_dn 的变量,它的值是 ...

  8. 常用linux命令及shell脚本

    参考:Linux命令大全 分割大文件 Split命令 按行分割(只能是文本文件) $split -l 1000 big_file 前缀 按文件大小分割 $split -b 64m big_file 前 ...

  9. oracle fm格式化

    select to_char(0.56,'FM999,999,990.00' ) from dual 其中 9代表如果存在数字则显示数字,不存在显示空格 其中 0代表如果存在数字则显示数字,不存在则显 ...

  10. 慕课学习--DNS的作用

    因为相对于32位的IP地址,人对域名更加敏感,也更容易记忆.所以一般都是把IP地址转化为域名进行网页的访问. DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映 ...