对于大量图片的网站，图片延迟加载是提高速度和性能的好方法。

　　目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。大体常用的就这两种。

　　这里介绍第一种方法，根据滚动条手动加载图片，最初采用的是LazyLoad.js这个现成的小插件，当然自己用jquery自己写也是很简单的。

　　我们到LazyLoad网站看看他的工作原理，使用方法：点这里http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

　　LazyLoad有是一个傻瓜似的插件，使用相当简单

　　首先加入jquery的引用

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
然后在需要延迟加载的页面加入
<script>
$("img").lazyload({
placeholder : "/Content/images/grey.gif",
effect : "fadeIn" 
});//延迟那些图片，可以自己定义
}
 
</script>
<body>
......
@foreach(DataRow dr in Model.Rows){
　　<img src="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';" />
}
.....
</body>
 

　　
　　就这么简单就可以将页面所有的img给“延迟加载”，其他效果可参考http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

　　
　　
　　浏览下我们的页面，效果确实能够实现，我们来看看是否真的实现了？

　　

　　

　　看到结果，我顿时有种被骗的感觉，页面可见区域显示4张图片，那么URL后台请求图片也应该<=4条，但真是的URL请求确是314个项目，很显然后台已经全部把图片加载出来了，而LazyLoad只是给你一个延迟加载的假象！假象！假象！

　　为什么会这样呢？分析下JQuery LazyLoad的源码

　　可以看看它的JS源码，基本原理：

　　1.更改图片的src属性为orginal属性，中断图片加载。

　　2.图片滚动到可视区域后再，再把orginal属性更改为src属性，使图片显示出来。

　　懂一点点jQuery的童鞋应该了解jQuery的加载机制，它的所有功能代码都要如下放置：

　　jQuery(document).ready(function($){  //这句话神马意思？指页面DOM加载完成后执行！

　　//功能代码加这儿

　　});

　　可图片一开始就有正确src，lazyLoad就算在快也快不过页面打开的http请求撒～，所以LazyLoad造成了一个延迟加载的假象

　　还有一点不得不说的是：浏览器对图片的下载加载方式。如果图片正在下载，然后将其src设置为另外一个，那么之前的图片是会立即被abort吗？所有浏览器都是这样的？如果将src设置为空(img.src=”)，那么之前的图片会被abort停止加载吗？所有浏览器都这样？移除src(removeAttibute(‘src’))呢？

　　实践证明，上面疑问的答案是 否，也就是无论你移除src或者重设src，都不能阻止浏览器(chrome、ff>4?)下载之前的图片。所以JS版的lazyload是无意义的。只有前后端配合（页面输出前就将img的src设置为占位图），才能真正lazyload。

　　问题发现了，如何解决呢？根据LazyLoad的思想，方法，我们事先输出占位符，然后通过js判断滚动位置替换img的src为真实图片即可。

　　扩展后的LazyLoad.js如下：　　

 
/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Project home:
*   http://www.appelsiini.net/projects/lazyload
*
* Version:  1.5.0
*
*/
(function ($) {
    $.fn.lazyload =function (options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window
        };
        if (options) {
            $.extend(settings, options);
        }
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements =this;
        if ("scroll"== settings.event) {
            $(settings.container).bind("scroll", function (event) {
                var counter =0;
                elements.each(function () {
                    if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
                        /* Nothing. */
                    } elseif (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
                        $(this).trigger("appear");
                    } else {
                        if (counter++> settings.failurelimit) {
                            returnfalse;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function (element) {
                    return!element.loaded;
                });
                elements = $(temp);
            });
        }
        this.each(function () {
            var self =this;
            //我就把这里的一段代码删除了
/* When appear is triggered load original image. */
            $(self).one("appear", function () {
                if (!this.loaded) {
                    $("<img />")
.bind("load", function () {
    $(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
    self.loaded =true;
})
.attr("src", $(self).attr("original"));
                };
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll"!= settings.event) {
                $(self).bind(settings.event, function (event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        returnthis;
    };
    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    $.belowthefold =function (element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    $.rightoffold =function (element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
    $.abovethetop =function (element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold + $(element).height();
    };
    $.leftofbegin =function (element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */
    $.extend($.expr[':'], {
        "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
    });
})(jQuery);
 

　　

　　然后页面内容我们做如下修改　　

 
@model System.Data.DataTable
@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int i = 0;
}
@section head{
　　<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

   <script src="/Scripts/lazyload.js" type="text/javascript"></script>   
<script type="text/javascript">
        $(function () {
            $("img").lazyload();
        });
    </script>
}
<table align="center">
    <tr>....
        <th>
            图片
        </th>....
    </tr>
    @foreach (System.Data.DataRow dr in Model.Rows)
    {
        <tr>....
            <td>
                <img src="/Content/images/grey.gif" original="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';"/>
            </td>.....
        </tr>
    }
</table>
 

　　
　　好我们在看下浏览器的请求

　　

　　
　　本页的数据量一共300多行，也就是300多个图片，首次加载下，URL加载的请求只有6个，OK啦。

　　继续往下浏览页面，在看看效果

　　

　　可以看到，LazyLoad起作用了。

　　分析下<img src="/Content/images/grey.gif" original="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';" />

　　首先页面加载的时候就输出站位符号grey.gif，由于所有图片都一样，所以URL只会请求一次grey.gif，而original是真实的图片地址，这个供LazyLoad掩饰加载使用。

　　本文技术上没啥东西，主要像表明一个道理，不要被表面现象蒙骗！

下载地址：http://files.cnblogs.com/qidian10/LazyLoad.rar

参考文档：

http://immmmm.com/transformation-jquery-lazyload.html

http://www.popo4j.com/qianduan/transformation_jquery_lazyload_plug.html

http://www.qiqiboy.com/2011/04/12/javascript-and-images-lazyload.html

http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

JQuery LazyLoad实现图片延迟加载-探究的更多相关文章

  1. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  2. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  3. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  4. jquery.lazyload.js 图片延迟加载

    当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...

  5. 使用jQuery lazyload 实现图片延迟加载

    下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...

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

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

  7. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  8. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  9. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

随机推荐

  1. C# 浅谈接口的优势

    总结了一下接口的小优势,可以便于新手理解为什么要用接口,用接口有什么好处. 1.接口的定义: 关键字:interface,接口名一般大写I开头,接口中定义方法,但是不实现方法 interface IB ...

  2. 让jar程序在linux上一直执行

    当我们把java程序打成jar包后,放到linux上通过putty或其它终端执行的时候,如果按照:java -jar xxxx.jar执行,当我们退出putty或终端的时候,xxxx.jar这个程序也 ...

  3. HM必修1

    高中数学必修一 笔记与拓展 1. 集合与函数概念 集合概念 集合是一个基本的数学概念. 集合是由集合的元素构成的. 当且仅当两个集合中包含着完全相同的元素且都不包含其它元素时两个集合相等. 集合是确定 ...

  4. BZOJ 1602 USACO2008 Oct 牧场行走

    翻翻吴大神的刷题记录翻到的... 乍一看是一个树链剖分吓瓜我...难不成吴大神14-10-28就会了树剖?orz... 再一看SB暴力都可过... 然后一看直接树上倍增码个就好了... 人生真是充满着 ...

  5. Moebius集群:SQL Server一站式数据平台

    一.Moebius集群的架构及原理 1.无共享磁盘架构 Moebius集群采用无共享磁盘架构设计,各个机器可以不连接一个共享的设备,数据可以存储在每个机器自己的存储介质中.这样每个机器就不需要硬件上的 ...

  6. 【Django】Django 如何支持 分组查询、统计？

    代码: from django.db.models import Sum alarm_sum_group_items = models.FILE_PROTECT_ALARM.objects.filte ...

  7. 【leetcode】Best Time to Buy and Sell Stock III

    Best Time to Buy and Sell Stock III Say you have an array for which the ith element is the price of ...

  8. js 函数定义三种方式

    <p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...

  9. 如何分割一个utf8字符串(保证单个汉字的完整性)

    std::list<std::string> split_utf8_string(const std::string& text) { std::list<std::stri ...

  10. iOS viewDidAppear 和 viewWillAppear

    今天发现,如果用navigation push一个controller,那么从动画开始就调用viewwillappear,动画全部停止才会调用viewDidAppear,不知道是否正确,先做记录,带验 ...