来源：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. linux下杀掉某用户所有进程

    直接删除用户,提示该用户下还有进程,以下两种方法可解决: 1.结束所有username的进程(如果提示没有该命令,那么用下面方法) killall -u username 2.杀死某一用户下的所有进程 ...

  2. 【LeetCode】搜索旋转排序数组【两次二分】

    假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个目标值, ...

  3. Android开发调试工具ADB的使用

    学习参考博客: https://www.cnblogs.com/meil/archive/2012/05/24/2516055.html ADB(Android Debug Bridge)是Andro ...

  4. 一、docker 入坑(win10和Ubuntu 安装)

    前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了.所以对于我们程序员而言,又得修炼一 ...

  5. latex在vim中的代码片段

    Gilles Castel写的vim中使用的代码片段,质量很高,原文:https://github.com/gillescastel 下载后,存放到 ~/.vim/plugged/ultisnips/ ...

  6. 三分钟掌握，使用Quqrtz.Net实现定时发送邮件

    在实际的项目中,常遇到延时触发工作以及定时触发工作 这里所讲的是借助第三方的组件 Quartz.Net 来实现(源码位置:https://github.com/quartznet/quartznet) ...

  7. 图解再谈ssh port forwarding-ssh隧道技术

    https://www.ramkitech.com/2012/04/how-to-do-ssh-tunneling-port-forwarding.html https://www.cnblogs.c ...

  8. Java基础篇（上）

    1.简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java 平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出 ...

  9. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  10. 41、css总结

      1.阴影:box-shadow:0 5px 20px rgba(0,0,0,.1); 2.css实现滚动进度条效果: body { position: relative; padding: 50p ...