某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > jquery.lazyload 实现图片延迟加载jquery插件_jquery_脚本之家

jquery.lazyload 实现图片延迟加载jquery插件_jquery_脚本之家

时间:2019-11-27 20:39

虽然实现了延迟载入的视觉效果,但是通过httpwatch等工具就可以看到,页面载入完毕后又发布很多空请求,而空请求就是由这些被替换过的img标签产生的,空请求也会一定程度上增加页面的打开时间,所以jquery.lazyload.js并未真生的实现页面延迟载入。 我对jquery.lazyload.js做了一些修改,实现了页面的延迟载入,不仅仅是图片,html代码同样可以延迟载入,大大减少了页面发出的请求数,提高了页面的打开速度。 修改后的jquery.lazyload.js代码如下: jquery.lazyload.js 复制代码 代码如下: /* * Lazy Load - jQuery plugin for lazy loading images * * Copyright 2007-2009 Mika Tuupola * * Licensed under the MIT license: * * * Project home: * * * Version: 1.5.0 * * Modify by @cnbaiying * Modify time: 2010-12-16 */ { $.fn.lazyload = function { var settings = { threshold : 0, //阀值 failurelimit : 0, event : "scroll", effect : "show", container : window }; if { $.extend; } /* Fire one scroll event per scroll. Not one scroll event per image. */ var elements = this; if ("scroll" == settings.event) { $.bind("scroll", function { var counter = 0; elements.each { if .parent || $.leftofbegin, settings)) { /* Nothing. */ } else if (!$.belowthefold, settings) && !$.rightoffold, settings)) { $.trigger; } else { if (counter++ > settings.failurelimit) { return false; } } }); /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function { return !element.loaded; }); elements = $; } this.each { var self = this; /* When appear is triggered load original image. */ $.one { if { //alert.html; var tmp_str = $; tmp_str = tmp_str.replace; tmp_str = tmp_str.replace.parent; self.loaded = true; } }); /* When wanted event is triggered load original image */ /* by triggering appear. */ if ("scroll" != settings.event) { $.bind(settings.event, function { if { $.trigger; /* Force initial check if images should appear. */ $.trigger; return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function { if (settings.container === undefined || settings.container === window) { var fold = $ + $; } else { var fold = $.offset().top + $.height(); } return fold <= $.top - settings.threshold; }; $.rightoffold = function { if (settings.container === undefined || settings.container === window) { var fold = $ + $; } else { var fold = $.offset().left + $.width(); } return fold <= $.left - settings.threshold; }; $.abovethetop = function { if (settings.container === undefined || settings.container === window) { var fold = $; } else { var fold = $.offset().top; } return fold >= $.top + settings.threshold + $; }; $.leftofbegin = function { if (settings.container === undefined || settings.container === window) { var fold = $; } else { var fold = $.offset().left; } return fold >= $.left + settings.threshold + $; }; /* Custom selectors for your convenience. */ /* Use as $.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})" }); }); 下面是测试页面的html代码 复制代码 代码如下:

什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload 在线压缩js 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: 1.导入JS插件

前言

-网上车市

2.在你的页面中加入如下的javascript: $; 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1.改变threshold $.lazyload; 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。 2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 复制代码 代码如下: $.lazyload({ placeholder : "img/grey.gif", event : "click" }); 3.可以通过定义effect 参数来定义一些图片显示效果 复制代码 代码如下: $.lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); LazyLoad技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题; 3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad 大家可以直接采用淘宝的延迟加载技术: 调用方法也是很简单的:

懒加载技术并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(

第1张图

图片 1

注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:

lazyload在什么场合中应用比较合适?

第2张图

图片 2

配置参数如下: 复制代码 代码如下:

涉及到图片,falsh资源,iframe,网页编辑器等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源。避免网页打开时加载过多资源,让用户等待太久。