`
binyan17
  • 浏览: 203305 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

图片延迟加载解决方法

阅读更多

原文地址:http://blog.tianxiadiyichi.com/PageDetail.aspx?Id=9

 

今天看到乐淘网图片延迟加载,感觉很好!具体效果:

效果:

1、图片没加载时,有一个正在加载中的动态图片

2、只加载一部分图片,即加载让用户看到的图片,当拖动滚动条时,再加载其他图片

好处:

这样可以大大的减少服务器负担,特别对于图片库这个东西,有时候用户只看第一屏的图片,没必要全部把图片都加载出来,加载一部分,即可以减少服务器负担又可以让用户少了等待的时间!

想看看其方法,通过查看代码发现了另一种解决之道。

方法:

第一步:定义样式,此步骤为了在图片还未完全加载,显示一个动态的正在加载中的图片

假如:图片放在<div class='imgList'><ul><li><a>图片</a></li></ul></div>

样式为:

<style type="text/css">
       .imgList ul{ list-style:none; margin:0px; padding:0px }
       .imgList ul li{ list-style:none; margin:0px; padding:0px; display:inline}
       .imgList ul li a
        {
            background: url(/images/Loading/ajax-loader.gif) no-repeat 50% 50%;
            width:160px; height:80px; display:block;
        }
        .imgList ul li a img{ width:160px; height:80px;}
 </style>

第二步:定义img

<img src='1*1像素图片' lazyload='真实图片url' />

第三步:写延迟加载js

var lazyLoad = {
    Init: function () {
        return $("img[lazyload]");
    },
    Calculate: function (lazyloadobject) {
        var windowHeight = $(window).height();
        var arrReturn = {};
        var _scrollTop;
        if (lazyloadobject.length == 0) {
            return null;
        }
        else {
            lazyloadobject.each(function (i) {
                _scrollTop = parseInt($(this).offset().top - windowHeight);
                if (!arrReturn.hasOwnProperty(_scrollTop)) {
                    arrReturn[_scrollTop] = new Array();
                }
                arrReturn[_scrollTop].push($(this));
            });
            this.ArrLoad = arrReturn;
            return arrReturn;
        }
    },
    ArrLoad: null,
    IsLoad: function (scrolltop, objectstop) {
        if (objectstop != null && objectstop != {}) {
            for (i in this.ArrLoad) {
                if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
                    for (j = 0; j < this.ArrLoad[i].length; j++) {
                        this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
                    }
                    delete this.ArrLoad[i];
                }
            }
        }
    },
    Run: function () {
        var lazyLoadObject = this.Init();
        this.Calculate(lazyLoadObject);
        arrScrollTop = this.ArrLoad;
        if (arrScrollTop == null) {
            return false;
        }
        else {
            var _this = this;
            _this.IsLoad($(window).scrollTop(), arrScrollTop);
            $(window).scroll(function () {
                _this.IsLoad($(this).scrollTop(), arrScrollTop);
            });
        }
    }
}
$(function () {
    lazyLoad.Run();
});

$(window).resize(function () {
    lazyLoad.Run();
});

特别备注:

PS:别忘记引用jquey类库

分享到:
评论

相关推荐

    jquery图片延迟加载

    为了解决这个问题,开发人员引入了“图片延迟加载”技术,jQuery作为一款广泛使用的JavaScript库,提供了实现这一功能的强大工具。本文将深入探讨jQuery图片延迟加载的概念、优势以及实现方法。 **一、什么是图片...

    jquery 图片延迟加载

    jQuery作为广泛使用的JavaScript库,提供了实现图片延迟加载的便利方法。 ### 一、什么是图片延迟加载? 图片延迟加载,也称为懒加载,是一种优化网页性能的技术。它使得图片在用户滚动到可视区域时才开始加载,而...

    HTML延迟加载图片 html图片延迟加载技术大全.zip

    通过`$(window).lazyload()`方法,配合适当的配置选项,可以轻松实现图片延迟加载。 3. **Intersection Observer API**:这是一种现代浏览器原生支持的API,用于检测元素是否与视口相交。结合此API,可以创建一个...

    jquery.scrollLoading图片延迟加载

    为了解决这个问题,"jQuery.scrollLoading" 提供了一种图片延迟加载的解决方案。这种技术能够在用户滚动到图片所在位置时才开始加载,从而显著提高页面加载速度。 ### 一、什么是图片延迟加载 图片延迟加载(Lazy ...

    网页图片延迟加载插件

    4. **纯CSS解决方案**:虽然CSS本身不支持事件监听,但通过`position: fixed`和`transform: translateZ(0)`等技巧,可以在某些情况下实现简单的图片延迟加载。 网页图片延迟加载插件通常包含以下组件: 1. **...

    图片懒加载(延迟加载)

    图片懒加载,也称为延迟加载或On-Demand Loading,是一种优化网页性能的策略,尤其在图像密集型网站中效果显著。这种技术的核心思想是只在用户滚动到图像时才加载它们,而不是一次性加载所有页面资源。这样可以减少...

    jquery延迟加载图片

    jQuery库提供了简单易用的API,使得实现图片延迟加载变得非常便捷。 ### 基本原理 延迟加载的核心思想是只加载视口内的图片,当用户滚动页面,即将进入视口的图片才会被加载。这样可以显著减少首屏加载时间,提高...

    jQuery网页图片延迟加载代码.zip

    总的来说,这个项目提供了一种实用的jQuery实现的图片延迟加载解决方案,有助于优化网页性能,尤其适用于图片丰富的网页。通过阅读代码和文档,开发者不仅可以直接应用此插件,还能学习到如何使用jQuery进行性能优化...

    JQUERY图片延迟加载,可以让你的首页一些不重要的图片延迟加载。

    "JQUERY图片延迟加载"是一种优化技术,它允许非首屏的或者不立即需要显示的图片在用户滚动到可视区域时才开始加载,以此来提升网页加载效率,降低用户等待时间。这种技术尤其适用于首页内容丰富的网站,如新闻门户、...

    jquery图片延迟加载花瓣网首页图片波浪条纹排列加载

    这些插件提供了现成的解决方案,只需要少量的配置即可实现图片延迟加载。 总的来说,jQuery图片延迟加载是网页性能优化的重要手段,结合独特的布局设计,如花瓣网首页的波浪条纹排列,可以创造出既美观又高效的网页...

    Jquery.ScrollLoading图片延迟加载

    为了解决这个问题,开发人员通常采用图片延迟加载(Lazy Loading)技术。jQuery ScrollLoading 就是一种基于 jQuery 实现的图片延迟加载插件,它在用户滚动到图片所在位置时才开始加载,从而提高页面加载速度,优化...

    图片延迟加载,lazyload.js使用实例

    总之,`lazyload.js`是一个实用的图片延迟加载解决方案,通过简单地配置和使用,可以有效地提升网页性能,减少用户等待时间,同时还能降低服务器带宽消耗。在实际开发中,结合最佳实践和合理的配置,可以最大化地...

    网页加载时图片延迟加载,显示当前屏时加载

    在网页设计中,图片延迟加载(也称为懒加载)是一种优化技术,用于提高网页的加载速度和用户体验。这种技术的核心思想是,当用户滚动页面到图片所在的位置时,才开始加载图片,而不是在页面初始化时一次性加载所有...

    Echojs延迟加载图片JavaScript微型库

    "Echojs延迟加载图片JavaScript微型库"就是一种实现这一功能的优秀解决方案。 **延迟加载的原理与重要性** 延迟加载,顾名思义,是指在用户滚动页面到特定位置时才加载图像。这种技术主要针对那些初始渲染时不需...

    图片延迟加载

    实现图片延迟加载通常有以下几种方法: 1. **纯JavaScript实现**:通过监听滚动事件,当图片进入可视区域时,动态修改图片的`src`属性,使其加载实际的图片URL。这种方法简单易行,但可能会影响到页面的滚动性能,...

    js页面图片延迟加载.zip

    在标题"js页面图片延迟加载.zip"中,我们可以推测这个压缩包可能包含了一个JavaScript实现的图片延迟加载解决方案。 **CSS** 在图片延迟加载中主要负责初始隐藏图片。通常,我们会给图片设置一个CSS样式,如`...

Global site tag (gtag.js) - Google Analytics