自己写jquery.lazyloading图片延迟加载插件，通用

jquery.lazyloading.js的作用/加载过程/原理/设计思路：
1、刚加载页面时只加载html,不加载图片，图片的src为空，把真实的图片路径放到data-original属性中，页面加载速度变快；
2、在页面加载完成之后，js初始化，把有data-original属性的图片再加一个<div></div>在外面，再创建一个隐藏的<img />标签，并且根据原图片的大小和位置计算loading图片的位置，把loading图片显示在中间；
3、判断window的scroll事件（滚动条变化），判断图片在不在可视区域内，如果在可视区域内，那么执行第4步，否则什么也不做。
4、判断图片的src与data-original是不是相同，如果不相同（说明还没有加载），执行第5步，否则什么也不做。
5、把图片的data-original赋值给隐藏的<img />标签的src，当隐藏的图片完全加载好之后（完成后会执行它的.load()事件），再把隐藏图片的src赋值给原图片的src(原因：保证loading图片消失后目标图片立即显示，如果一开始把data-original赋值给图片的src，那么还没加载完就会显示图片，网页中图片是一截一截显示的，非常难看).

（为了保证在火狐中，图片未加载或图片路径不对，图片的位置被其他元素占用），请不要写.lazyloading的css样式，否则页面会乱。

通用的图片的html：

<div style="width: 772px; height: 449px;">
   <img class="lazyloading" src="" data-original="/ListPicThumbnail/list90.jpg" height="772" width="449">
</div>
或者l：

<div style="width: 772px; height: 449px;">
   <a href="#" target="_blank"> <img class="lazyloading" src="" data-original="/ListPicThumbnail/list90.jpg" height="772" width="449"> </a>
</div>

不断修改完善中……

最后更新：2013-12-17 16:00:00

加载等的图片：

/*!
* jquery.lazyoading.js
*自定义的页面图片延迟加载插件，比网上的jquery.lazyload简单，也更适合自己的网站
*使用方法：
把img 的class加上 lazyloading,data-original 放图片的真实路径
然后先引用jquery，再引用jquery.lazyoading.js，再调用：$("img.lazyloading").lazyloading({loadfirst:true});
* by pukuimin
* 2013-11-01
*2013-11-08 解决了图片没有指定高度的问题
*2013-11-14 解决了没有指定高度加载图片之后有间隔的问题
*2013-12-17 加入了<span>图片显示时的 animate过渡效果</span>，把alt赋值给title
 */
/// <reference path="jquery-1.8.2.min.js" />
(function ($) {
    $.fn.lazyloading = function (options) {
        var defaults = {
            preyimg: "/Content/images/Imgpreview/grey.gif",
            picpath: "data-original",
            container: $(window),
            loadfirst: false, //进入页面后是否加载当前页面的图片
            defaultHeightID: "lazyloadingHeight"//页面上默认高度的input标签id
            //imgPaddingID: "lazyloadingPadding"//img的padding值
        };
        var params = $.extend({}, defaults, options || {});
        params.cache = [];
        $(this).each(function () {
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["picpath"]), preyimg = params["preyimg"];
            var defaultheight = $("#" + params["defaultHeightID"]).val(); //, padding = $("#" + params["imgPaddingID"]).val(); //
            //重组
            var data = {
                obj: $(this),
                tag: node,
                url: url,
                preyimg: preyimg,
                defaultheight: defaultheight
            };
            params.cache.push(data);
        });

        var init = function () {
            $.each(params.cache, function (i, data) {
                var thisImg = data.obj, tag = data.tag, url = data.url, preyimg = data.preyimg;
                if (typeof (url) != "undefined")// 判断是否需要延迟加载
                {
                    var parent1 = thisImg.parent(); //a
                    var Inner = null; //
                    if (parent1.is("a") == true) {//img wrap by a
                        Inner = parent1;
                    }
                    else {
                        Inner = thisImg;
                    }
                    var width = thisImg.attr("width") || thisImg.css("width");
                    var height = data.defaultheight || thisImg.css("height");
                    //if (i == 0) alert(data.defaultheight);
                    var attrheight = thisImg.attr("height");
                    if (attrheight != null) height = attrheight;
                    if (width != null && width.indexOf("px") > -1) width.replace("px", "");
                    if (height != null && height.indexOf("px") > -1) height.replace("px", "");
                    var divstr = "<div class='.loading' style='text-align: left;position:relative;float:left;width:" + width + "px;";
                    var HasHeight = true; //图片是否指定了高度
                    divstr = divstr + "height:" + height + "px;";
                    if (attrheight == null || attrheight == "") {
                        HasHeight = false;
                    }

                    thisImg.css("position", "relative");

                    divstr = divstr + "' ></div>"
                    //修正外层div：text-align的影响
                    Inner.wrap(divstr);
                    //修正img外面不是a标签时parent()已经改变的问题
                    parent1 = thisImg.parent();
                    if (HasHeight == true) { parent1.attr("lazyloading_hasheight", "1"); } //是否指定了高度
                    else { { parent1.attr("lazyloading_hasheight", "0"); } }
                    parent1.append("<img class='loadhiddenimg' width='0' height='0' style='display:none;' src='' />");
                    thisImg.attr("src", preyimg);
                    thisImg.removeAttr("width").removeAttr("height");
                    thisImg.attr("width1", width).attr("height1", attrheight);

                    ////thisImg.attr("width", "50px").attr("height", "50px"); //loading图大小
                    //thisImg.css("margin", "0 auto");
                    thisImg.css("margin", ((height / 2) - 25) + "px auto auto " + ((width / 2) - 25) + "px");
                    $(".lazyloading").css("display", "table"); //.css("position", "relative");
                }
            });
        }
        //动态显示数据
        var loading1 = function () { };
        var loading = function () {
            //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
            var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度

            $.each(params.cache, function (i, data) {
                var thisImg = data.obj, tag = data.tag, url = data.url, post, posb;

                if (thisImg) {//对象不为空
                    if (typeof (url) != "undefined") {// 判断是否需要延迟加载
                        var PictureTop = parseInt(thisImg.offset().top);
                        //如果处理可见范围内，并且原图地址data-original不等于src,则加载图片
                        if (PictureTop >= thisTop && PictureTop <= thisButtomTop && thisImg.attr("data-original") != thisImg.attr("src")) {
                            var hiddenImg = thisImg.siblings("img.loadhiddenimg");

                            hiddenImg.load(function () { //隐藏图片加载完之后的回调函数
                                var width = thisImg.attr("width1");
                                var height = thisImg.attr("height1");
                                thisImg.attr("width", width).attr("height", height).removeAttr("width1").removeAttr("height1");
                                thisImg.css("margin", "0 auto");
                                if (thisImg.parent().attr("lazyloading_hasheight") == "0") {//没有指定高度时，加载图片后去掉div高度自适应
                                    if (thisImg.parent().is("a") == true) {
                                        thisImg.parent().parent().css("height", "");
                                    }
                                    else {
                                        thisImg.parent().css("height", "");
                                    }
                                }
                                thisImg.load(function () {
                                    if (thisImg.parent().is("a") == true) {
                                        thisImg.parent().parent().css("height", thisImg.height());
                                    }
                                    else {
                                        thisImg.parent().css("height", thisImg.height());
                                    }
                                });
                                thisImg.css('opacity', '0.2');
                                thisImg.attr("src", hiddenImg.attr("src"));
                                thisImg.animate({ opacity: 1.0 });
                                if (thisImg.attr("alt") != "") {
                                    thisImg.attr("title", thisImg.attr("alt"));
                                    thisImg.attr("alt", "");
                                }
                            }).error(function () {
                                thisImg.error(function () {
                                    thisImg.css("margin", "0 auto auto 0");
                                    if (thisImg.parent().attr("lazyloading_hasheight") == "0") {//没有指定高度时，加载图片后去掉div高度自适应
                                        if (thisImg.parent().is("a") == true) {
                                            thisImg.parent().parent().css("height", "");
                                        }
                                        else {
                                            thisImg.parent().css("height", "");
                                        }
                                    }
                                });
                                thisImg.attr("src", hiddenImg.attr("src")); //alert("error");
                                if (thisImg.attr("alt") != "") {
                                    thisImg.attr("title", thisImg.attr("alt"));
                                    thisImg.attr("alt", "");
                                }
                            });
                            hiddenImg.attr("src", url);
                        }
                    }
                }
            });
        };
        //初始化
        init();
        //事件触发
        //加载完毕即执行
        if (params["loadfirst"] == true) loading();
        //滚动执行
        params.container.bind("scroll", loading).bind("resize", loading);
    };
})(jQuery);

用法示例：

<div style="width: 190px; height: 237px; float: left;"><a href="http://maga.kinpan.com/Magazine/MagazineEachperiod/sdlp?id=201311011146457968750c36ca60628">
  <img  alt="商业街区" src="" data-original="http://account.kinpan.com/Upload/Magazine/MagazineBookImage/201311011141232812500a4cbf15f0f.jpg" width="190" height="237" class="lazyloading" /></a>
</div>


<script type="text/javascript">


$(function () {


    $("img.lazyloading").lazyloading({ loadfirst: true });


})


</script>


使用本插件有任何问题可以一起交流，我的常用邮箱：pukuimin@qq.com
				


				
时间： 2024-11-03 08:49:00

		
		


		


	

	
	

		


		
自己写jquery.lazyloading图片延迟加载插件，通用的相关文章


								

		

			

                jQuery lazyLoad图片延迟加载插件的优化改造方法分享_jquery
			

		

		

									

				jQuery lazyLoad.js插件 是一款基于jquery框架,可以"实现"图片延迟加载的插件.请注意,我用了双引号,因为从我自己实际调试的结论来说呢,并不会延迟加载,而是先下载,然后通过改变<img>的src属性来隐藏原来的图片. 我们先来看看他的代码吧! 复制代码 代码如下: <script type="text/javascript" src="/static/jssrc/lazyload.js"></s			

		

	

				

		

			

                jquery.lazyload 图片延迟加载实例
			

		

		

									

				<!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="content-			

		

	

				

		

			

                使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）_jquery
			

		

		

									

				图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一			

		

	

				

		

			

                基于jQuery的图片剪切插件_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/xhtm			

		

	

				

		

			

                autoIMG 基于jquery的图片自适应插件代码_jquery
			

		

		

									

				为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: 复制代码 代码如下: // jQuery.autoIMG.js v0.2 // Tang Bin - http://plan			

		

	

				

		

			

                Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件_jquery
			

		

		

									

				从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包			

		

	

				

		

			

                Jquery图片延迟加载插件jquery.lazyload.js的使用方法_jquery
			

		

		

									

				最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc			

		

	

				

		

			

                jquery 简单图片导航插件jquery.imgNav.js_jquery
			

		

		

									

				熟悉jquery的家伙大概花个5到10分钟就可以搞定了吧.由于这种导 航效果比较通用,LEVIN顺手写了个 jquery插件- 如果你的网站也需要类似的效果,大可拿去直接用或者扩展下:) 如果你也想尝试将某些可重用功能封 装成jquery插件,别忘了看看一般的jquery插件开发过程,另外还有偶的一个jquery插件模板. 复制代码 代码如下: ;(function($) { // Private functions. var p = {}; p.showC = function(opts) {			

		

	

				

		

			

                jQuery/CSS3图片特效插件整理推荐_jquery
			

		

		

									

				1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示 源码下载 2.HTML5实现的3D球体斑点运动动画特效源码 这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是