参考网址：http://code.ciaoca.com/jquery/lazyload/

延迟加载能大大增加你网站的加载速度！

需要引入以下文件<Jq文件也是少不了的>：

<script src="~/Content/demo/jquery.lazyload.js"></script>
<script src="~/Content/demo/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$('img').lazyload();
</script>

这些JQ文件的下载地址：http://code.ciaoca.com/jquery/lazyload/

官方网址：http://appelsiini.net/projects/lazyload/

建议将这些JQ文件引用放在HTML 文档的最下面，这句话很重要。

所引用的JQ文件必须在1.4版本以上

所加载的图片，必须设置他的高和宽。

最后，通过一个简单的例子加以示范：

示例代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

   <style type="text/css">

       img {

       height:800px; width:500px;

       }

   </style>

</head>

<body>

    <img src="data:images/grey.gif" data-original="images/1.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/2.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/3.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/4.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/5.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/6.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/7.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/8.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/9.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/10.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/11.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/12.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/13.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/14.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/15.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/16.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/17.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/18.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/19.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/20.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/21.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/1.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/2.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/3.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/4.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/5.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/6.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/7.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/8.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/9.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/10.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/11.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/12.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/13.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/14.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/15.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/16.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/17.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/18.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/19.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/20.jpg" /><br />

    <img src="data:images/grey.gif" data-original="images/21.jpg" /><br />

</body>

</html>

 <script src="Scripts/jquery-3.1.1.js"></script>

    <script src="Scripts/jquery-3.1.1.min.js"></script>

<script src="Scripts/jquery.lazyload.js"></script>

<script src="Scripts/jquery.lazyload.min.js"></script>

 <script type="text/javascript">

     $('img').lazyload();

 </script>

示例网址：http://www.huaxuancch.com/index.html

JQ版本下载：http://www.jq22.com/jquery-info122

演示截图，请打开示例网址，

由上图可知，网址初步仅仅只加载两张图片。

然后........

我们滑动鼠标滑轮.........

每滑到一张图片，就会自主加载。

这样的方式，避免了一次性加载所有图片，使网站打开速度大增。同时，也不会影响使用！

@陈卧龙的博客 

Jquery 图片延迟加载技术的更多相关文章

  1. 使用jquery插件实现图片延迟加载技术（懒加载）

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

  2. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  3. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

  4. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  5. Jquery.ScrollLoading图片延迟加载技术

    关于分屏加载图片,像天猫.京东等电商图片较多页面很长,就采用了延迟加载技术. 目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的, 随着页面的滚动,显示区域图片才被动态加载. 原理其实 ...

  6. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  7. jquery lazyload延迟加载技术的实现原理分析_jquery

    前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页, ...

  8. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

  9. 第一次自己写jquery图片延迟加载插件，不通用，但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

随机推荐

  1. OSPF协议总结

    总结: 1.ospf协议报文不会泛洪扩散,而是逐级路由器处理后,再从所有ospf启用端口发送出去,也就是说,只能从邻居接收到ospf报文,报文的源ip是邻居的ip地址,目的ip是组播ip. 2.开启o ...

  2. spring BeanFactory及ApplicationContext中Bean的生命周期

    spring bean 的生命周期 spring BeanFactory及ApplicationContext在读取配置文件后.实例化bean前后.设置bean的属性前后这些点都可以通过实现接口添加我 ...

  3. (网页)js常见报错之Unexpected token in JSON at position

    出现这个报错提示,根本原因只有一个--json解析异常,所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确,至于本文血案的导火索是因为json注释滴问题.

  4. 一文学redis操作（记录向）

    相关内容: 虽然有参考文档,而且记忆太多也是耗脑,但学习的时候还是想要有个系统划分开知识点的文档,即使不要求去细致记忆,但划分开知识块后脑子里的印象才会更清晰,所以就有了这个博文. 主要是将各种命令进 ...

  5. 为Hexo Next主题添加分享及打赏功能

    博客地址:往事亦如风的博客 要想先看打赏和分享功能效果,请移步我的博客 打赏功能 因为next主题自带打赏功能,所以我们只需要在next的主题配置文件中找到如下代码,image文件夹是我在blog/s ...

  6. 小技巧-mac修改finder菜单栏

    效果: 方法: 添加:打开finder后,长按command,可以将其他app拖到菜单栏. 删除:同理,长按command,将不需要的图标拖出菜单栏即可. PS:强烈推荐gotoshell这个小工具, ...

  7. Azure 标准与高级托管磁盘存储的相互转换

    托管磁盘提供两种存储选项:高级(基于 SSD)和标准(基于 HDD). 它允许基于性能需求在这两个选项之间轻松切换,并保障最短停机时间. 非托管磁盘不具备此功能. 但可以轻松转换为托管磁盘,以便在这两 ...

  8. ASP.NET Boilerplate 学习

    1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: 3.在AbpTest.Web.Host项目的ap ...

  9. EntityFramework Code-First 简易教程（四）-------继承策略

    在前篇CodeFirst类型约定中,我们在数据库中为每一个模型类创建一个表,但是有个问题,我们可以设计出带继承关系的模型类,即面向对象编程既有“has a”(表示类继承)也有“is a”(表示类包含) ...

  10. nginx服务器开启缓存、反向代理

    一.反向代理配置 1.反向代理服务器配置如下 反向代理就是需要这一行proxy_pass来完成.当我们要访问后端web服务器的时候,我们只需要访问代理服务器就可以了,此时代理服务器就充当后端web服务 ...