这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量，减轻服务器负担。

效果展示 http://hovertree.com/texiao/jqimg/7/

请用鼠标或者键盘方向键使页面向下滚动，注意图片的变化。本特效没有使用专门的图片延迟加载插件，只需要一小段jQuery代码就实现了图片延迟加载，使用非常方便。在本文后面附有源码下载。

用到的加载中的图片：

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" />

    <meta name="description" content="何问起">

    <meta name="keywords" content="何问起">

    <link href="" rel="stylesheet">

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            border: 0;

        }

        .hovertreebox {

            padding-top: 800px;

        }

        .img_hovertreebox {

            float: left;

            width: 33%;

            text-align: center;

            margin-bottom: 100px;

        }

        .hovertreeinfo{text-align:center;}

        .hovertreeinfo a{color:blue;}

    </style>

    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

    $(function(){

        $(window).scroll(function(event) {

          var ah=$(window).scrollTop();

          var ch=$(window).height()

          $('.img_hovertreebox').each(function(){

            var bh=$(this).offset().top;

            if(ch+ah-200>bh){

                var a=$(this).find('img').attr("load_src");

                 $(this).find('img').attr("src",a);

            }

          })

        });

    })

    </script>

</head>

<body>

    <div class="hovertreeinfo"><h1>jQuery鼠标滚动页面图片延迟加载</h1>

    请向下滚动页面。注意图片的变化。

        <a href="http://hovertree.com">何问起</a>

        <a href="http://hovertree.com/menu/texiao/">网页特效</a>

        <a href="http://hovertree.com/h/bjaf/yanchijaizai.htm">代码说明</a>

    </div>

    <div class="hovertreebox">

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img1.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img2.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img3.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img4.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img5.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img6.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img7.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img8.png">

        </div>

        <div class="img_hovertreebox">

            <img src="http://hovertree.com/texiao/jqimg/7/img/load.gif" load_src="http://hovertree.com/texiao/jqimg/7/img/img9.png">

        </div>

    </div>

</body>

</html>

源码下载：http://hovertree.com/h/bjaf/77wklbrj.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery图片延迟加载的更多相关文章

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

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

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

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

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

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

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

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

  5. Jquery 图片延迟加载技术

    参考网址:http://code.ciaoca.com/jquery/lazyload/ 延迟加载能大大增加你网站的加载速度! 需要引入以下文件<Jq文件也是少不了的>: <scri ...

  6. JQuery 图片延迟加载并等比缩放插件

    原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...

  7. jQuery图片延迟加载插件

    在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量. 使用图片延时加载插件就解决这些问题. 方法: 引入jquery和插件文件 <script src="jq ...

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

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

  9. jquery图片延迟加载方案解决图片太多加载缓慢问题

    当在做一个图片展示站的时候,一个页面加载的图片过多会,如果服务器的带宽跟不上,明显会感觉到页面很卡,严重的浏览器也会崩溃,所以我推荐采用即看即所得的模式,当滚动到下一屏时才进行加载图片. 注意:即便如 ...

随机推荐

  1. psoc学习

    第一是:项目的路径需要放在Documents and Settings\,也就是默认的文件夹的地方,不然会报错错误范例为:Question:CY8CKIT-023 kit example projec ...

  2. Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)

    作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...

  3. SQL字符串函数

    LEN() :计算字符串长度(字符的个数.)datalength();//计算字符串所占用的字节数,不属于字符串函数.测试varchar变量与nvarchar变量存储字符串a的区别.见备注1.LOWE ...

  4. [每日Linux]Linux下xsell和xftp的使用

    实验缘由: 1.xsell在Linux下的作用就是远程登录的一个界面,也就是实现访问在Windows下访问Linux服务器的功能.之前在数据挖掘实验中因为自己电脑的内存不够,曾经使用过实验室的服务器跑 ...

  5. ASP.NET 5 改名 ASP.NET Core 1.0

    今天,Scott Hanselman在其博客上宣布<ASP.NET 5 is dead - Introducing ASP.NET Core 1.0 and .NET Core 1.0>, ...

  6. 按照Enterprise Integration Pattern搭建服务系统

    在前一篇文章中,我们已经对Enterprise Integration Pattern中所包含的各个组成进行了简单地介绍.限于篇幅(20页Word以内),我并没有深入地讨论各个组成.但是如果要真正地按 ...

  7. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  8. 前端工程师手中的Sublime Text

    原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...

  9. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  10. 关于安装安卓SDK出现无法更新问题时的解决办法

    近日,如果安装过安卓的同学可能知道,大家在使用Android SDK升级或者安装SDK的时候,出现了访问Failed to fetch URL http://dl-ssl.google.com/and ...