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

效果展示 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. Redis百亿级Key存储方案（转）

    1 需求背景 该应用场景为DMP缓存存储需求,DMP需要管理非常多的第三方id数据,其中包括各媒体cookie与自身cookie(以下统称supperid)的mapping关系,还包括了supperi ...

  2. css text-fill-color与text-stroke讲解

    顾名思义"text-fill-color"就是文字填充颜色而"text-stroke"就是文字描边.还别说,两个属性可以制作出各种炫酷的文字效果,不过IE系列都 ...

  3. C# 自定义控件VS用户控件

    1 自定义控件与用户控件区别 WinForm中, 用户控件(User Control):继承自 UserControl,主要用于开发 Container 控件,Container控件可以添加其他Con ...

  4. css中line-height行高的深入学习

    之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...

  5. 浅谈Web自适应

    前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...

  6. [OC] NSURLSession

    有的程序员老了,还没听过NSURLSession 有的程序员还嫩,没用过NSURLConnection 有的程序员很单纯,他只知道AFN. NSURLConnection在iOS9被宣布弃用,NSUR ...

  7. 使用四元数解决万向节锁(Gimbal Lock)问题

    问题 使用四元数可以解决万向节锁的问题,但是我在实际使用中出现问题:我设计了一个程序,显示一个三维物体,用户可以输入绕zyx三个轴进行旋转的指令,物体进行相应的转动. 由于用户输入的是绕三个轴旋转的角 ...

  8. Spring7：基于注解的Spring MVC（下篇）

    Model 上一篇文章<Spring6:基于注解的Spring MVC(上篇)>,讲了Spring MVC环境搭建.@RequestMapping以及参数绑定,这是Spring MVC中最 ...

  9. Go build constraints

    Go语言有一个不(奇)错(葩)的设计,就是build constraints(构建约束).可以在源码中通过注释的方式指定编译选项,比如只允许在linux下,或者在386的平台上编译啊之类的:还可以通过 ...

  10. 如何安装一个优秀的BUG管理平台——真的是手把手教学！

    前言 就BUG管理而言,国内的禅道做得很不错,而且持续有更新.我们来看看如何从头到尾安装禅道,各位要注意的是,不是文章深或者浅,而是文章如何在遇到问题的时候,从什么途径和用什么方法解决问题的.现在发觉 ...