来源：http://www.jq22.com/jquery-info390

使用前要求：

img的设置：

1、class要配上“lazy”；

2、用data-original代替src；

3、如果想要占位的话，img别忘了写上宽高。

<!DOCTYPE html>

<html>

<head>

<title>jQuery图片延迟加载插件jQuery.lazyload | jQuery插件库</title>

<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>

<script src="http://demo.jq22.com/tuupola-jquery_lazyload/jquery.lazyload.js?v=1.9.1" type="text/javascript"></script>

</head>

<body>

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_1.jpg" width="765" height="574" alt="Viper 1">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

<script type="text/javascript" charset="utf-8">

  $(function() {

      $("img.lazy").lazyload({effect: "fadeIn"});

  });

</script>

</body>

</html>

jquery.lazyload.js-v1.9.1延时加载插件，已兼容ie6和各大浏览器的更多相关文章

  1. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  2. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  3. jquery.datatable.js与CI整合 异步加载（大数据量处理）

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  4. jquery easyui使用（三）······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

  5. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  6. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  7. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  8. Selenium2(WebDriver)总结(一)---启动浏览器、设置profile&加载插件

    本文主要记录下在使用selenium2/webdriver时启动各种浏览器的方法.以及如何加载插件.定制浏览器信息(设置profile)等 环境搭建可参考我的另一篇文章:http://www.cnbl ...

  9. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. PHP发送邮箱的方法smtp方法

    PHP发送邮箱的方法 采用的smtp方式首先进入163邮箱 设置  POP3/SMTP服务打勾 然后会提示你设置授权密码就是SMTP服务器的用户密码smtp.php文件代码<pre>< ...

  2. 页面嵌入iframe关于父子传参调用

    1.首先来说一下iframe是干什么用的 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架),通俗点说就是在一 ...

  3. 钉钉的sonar集成通知

    代码地址: https://gitee.com/chejiangyi/dingding-sonar 钉钉(dingding)的sonar(代码质量管理工具的)集成通知,非常简单的一个小工具. 钉钉的s ...

  4. C语言函数调用

    1.backtrace一些内存检测工具如Valgrind,调试工具如GDB,可以查看程序运行时函数调用的堆栈信息,有时候在分析程序时要获得堆栈信息,借助于backtrace是很有帮助的,其原型如下: ...

  5. 『树上匹配 树形dp』

    树上匹配 Description 懒惰的温温今天上班也在偷懒.盯着窗外发呆的温温发现,透过窗户正巧能看到一棵 n 个节点的树.一棵 n 个节点的树包含 n-1 条边,且 n 个节点是联通的.树上两点之 ...

  6. drools －规则语法

    文章结构 1. 基础api 2. FACT对象 3. 规则 4. 函数 1. 基础api 在 Drools 当中,规则的编译与运行要通过Drools 提供的各种API 来实现,这些API 总体来讲可以 ...

  7. 聊聊Golang逃逸分析

    逃逸分析的概念,go怎么开启逃逸分析的log. 以下资料来自互联网,有错误之处,请一定告之. 什么是逃逸分析 wiki上的定义 在编译程序优化理论中,逃逸分析是一种确定指针动态范围的方法——分析在程序 ...

  8. vue自定义指令VNode详解(转)

    1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...

  9. vue + yarn 项目开发 (一)

    1.打开src文件夹中的main.js文件,添加引用element ui框架 import ElementUI from 'element-ui' import 'element-ui/lib/the ...

  10. 小tips：在JS语句执行机制涉及的一种基础类型Completion

    看一个如下的例子.在函数 foo 中,使用了一组 try 语句.在 try 中有 return 语句,finally 中的内容还会执行吗? function foo(){ try{ return 0; ...