开发者社区> 真爱无限> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: jquery.lazyloading.js的作用/加载过程/原理/设计思路: 1、刚加载页面时只加载html,不加载图片,图片的src为空,把真实的图片路径放到data-original属性中,页面加载速度变快; 2、在页面加载完成之后,js...
+关注继续查看

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件-图片懒加载-53
jquery插件-图片懒加载-53
13 0
推荐几款jquery图片切换插件
一、前言   毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式、各种姿势都涌现出来了。这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示。
765 0
Lazyr.js – 延迟加载图片(Lazy Loading)
  Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。     在线演示      源码下载   您可能感兴趣的相关文章 网站开发中很有用的 j...
752 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
639 0
43个多图片轮转jquery插件
在网页设计中,在一个有限的空间中让用户可以通过左右滚动的方式来浏览多张图片,是我们常用到的一种控件。下面我们将为您介绍43个多图片轮换播放jQuery教程和插件。 1. rCarousel 2.
1120 0
【精心推荐】10款非常时尚的 jQuery 图片切换插件
  这篇文章向大家推荐几款非常漂亮的 jQuery 图片切换效果插件。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员更快速的实现各种精美的界面交互效果。
1067 0
jquery插件图片浏览改进版
在关于《jquery插件图片浏览》中遗留一个问题,“有点小问题:当图片第一次加载没完成的时候,这时图片没有显示,会自动执行到下一张图片” 改进版代码如下: (function($){ $.
718 0
jquery插件图片浏览
jquery插件图片浏览 jquery代码部分 (function($){ $.fn.mPicsList = function(options){ var picsImgs = $(this).
662 0
jquery插件整理篇(八)色彩选择器类
(1) Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。Farbtastic 热点图书:www.hotbook.cn (2)jQuery Color Picker 一个简单的颜色选择控件。
620 0
+关注
真爱无限
主要技术.net sqlserver mysql。
302
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载