修改jquery.lazyload.js实现页面延迟载入
虽然实现了延迟载入的视觉效果，但是通过httpwatch等工具就可以看到，页面载入完毕后又发布很多空请求，而空请求就是由这些被替换过的img标签产生的，空请求也会一定程度上增加页面的打开时间，所以jquery.lazyload.js并未真生的实现页面延迟载入。
我对jquery.lazyload.js做了一些修改，实现了页面的延迟载入，不仅仅是图片，html代码同样可以延迟载入，大大减少了页面发出的请求数，提高了页面的打开速度。
修改后的jquery.lazyload.js代码如下：
jquery.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
*
* Modify by @cnbaiying
* Modify time: 2010-12-16
*/
(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).parent(), settings) || $.leftofbegin($(this).parent(), settings)) {
/* Nothing. */
} else if (!$.belowthefold($(this).parent(), settings) && !$.rightoffold($(this).parent(), settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* 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) {
//alert($(self).parent().html($(self).html()));
var tmp_str = $(self).html();
tmp_str = tmp_str.replace("<", "<");
tmp_str = tmp_str.replace(">", ">");
$(self).parent().append(tmp_str);
self.loaded = true;
}
});
/* 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);
return this;
};
/* 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);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="汽车图片,汽车图片壁纸, 汽车图片桌面, 汽车图片库,汽车图片大全" />
<meta name="description" content="汽车图片，网上车市汽车图片大全频道为网友提供各种汽车图片及美女图片下载，各种车型汽车图片桌面，汽车图片壁纸，车展美女图片，美女车模图片等。精彩图片，尽在网上车市。" />
<title>【汽车图片|汽车美女图片-汽车图片大全】-网上车市</title>
<style>
.switch_textarea {display:none;}
.div_style {width:600px; height:400px; }
</style>
<script type="text/javascript" src="jquery.1.4.4.js"></script>
<script type="text/javascript" src="lazyload.jquery.js"></script>
<script>
$().ready(function(){
$(".switch_textarea").lazyload();
});
</script>
</head>
<body>
<H2>第1张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2385fd03.jpg" /></textarea></div>
<H2>第2张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2366adec.jpg" /></textarea></div>
<H2>第3张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd233b8da4.jpg" /></textarea></div>
<H2>第4张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd231a0fd8.jpg" /></textarea></div>
<H2>第5张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd22e68f56.jpg" /></textarea></div>
<H2>第6张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd22c55a5d.jpg" /></textarea></div>
<H2>第7张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd2278872b.jpg" /></textarea></div>
<H2>第8张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd224a0f6e.jpg" /></textarea></div>
<H2>第9张图</H2>
<div class="div_style"><textarea class="switch_textarea"><img src="4bdfd21fb42bc.jpg" /></textarea></div>
</body>
</html>
测试页面的html代码中将所有要载入的图片都放到了textarea标签中，其目的就是防止页面载入时这些img标签向服务器发出请求，从而实现减少不必要的请求数，实际应用中也可以将不需第一次载入的html代码放到textarea中。
相关推荐
-
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包
-
深入研究jQuery图片懒加载 lazyload.js使用方法
lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min
-
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区
-
js前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien
-
jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代
-
Vue自定义图片懒加载指令v-lazyload详解
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o
-
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc
-
原生JS实现图片懒加载(lazyload)实例
前言 图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码. 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64.雪碧图等:懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片. 具体代码 首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面. <
-
JavaScript实现图片懒加载(Lazyload)
懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 原理 将页面中的img标签src指向一张小图片或者src为空,然后定义data
-
详解jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动