图片懒加载功能(优化页面加载速度)ecshop中为例
2013-07-02 10:54:29;  来源:网络;  作者:;  评论:0 点击:

很多的商城都使用了图片懒加载功能,打开页面的时候图片如果不在窗口区域则不加载,用户滑动页面再加载,实现滚动加载效果。页面加载速度比...
很多的商城都使用了图片懒加载功能,打开页面的时候图片如果不在窗口区域则不加载,用户滑动页面再加载,实现滚动加载效果。
页面加载速度比较:
未使用懒加载:(商品列表页面,商品缩略图为18张,加上其他的图片总加载时间为4s)

采用懒加载:(加载时间为2s)


对于列表页面图片多的情况下效果还是很明显的,其它区域也可以使用懒加载,视个人需要而定。

实现方法:
1、前提:你的ecshop程序解决了jquery冲突的问题。
2、引入插件:jquery.scrollLoading.js
3、将需要懒加载的区域图片修改为:
<img src="/themes/default/images/loading_230.gif" data-url="{$goods.goods_thumb}" alt="{$goods.goods_name}" class="scrollLoading" />
说明:src:填一个loading效果的图片,data-url:图片的真实地址,class属性为:scrollLoading
4、调用插件:<script>$(".scrollLoading").scrollLoading();</script>

jquery.scrollLoading.js内容

(function ($) {

// alert($.fn.scrollLoading);

$.fn.scrollLoading = function (options) {

    var defaults = {

    attr: "data-url"

};

var params = $.extend({}, defaults, options || {});

params.cache = [];

$(this).each(function () {

    var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);

    if (!url) { return; }

    var data = {

        obj: $(this),

        tag: node,

        url: url

        };

    params.cache.push(data);

});

var loading = function () {

    var st = $(window).scrollTop(), sth = st + $(window).height();

    $.each(params.cache, function (i, data) {

        var o = data.obj, tag = data.tag, url = data.url;

        if (o) {

            post = o.position().top; posb = post + o.height();

            if ((post > st && post < sth) || (posb > st && posb < sth)) {

            if (tag === "img") {

                o.attr("src", url);

            } else {

                o.load(url);

            }

            data.obj = null;

        }

    }

});

return false;

};

loading();

$(window).bind("scroll", loading);

};

})(jQuery);
本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。http://www.zhuitaiyang.com/html/fcms/218.html

相关热词搜索:图片 加载 功能

上一篇:在wordpress中制作留言板功能的方法
下一篇:phpwind本地测试wamp中出现500 Internal Server Error

收藏
回到顶部