延时加载与顺序加载的方法_动易系统_日志_DTOP

延时加载与顺序加载的方法

来源：本站原创发布时间：2018-07-01 07:46:13 浏览次数：次【字体：小大】

最近好几个客户包括麻阳、芷江都参考了泸州的引导页效果。

但当网速慢，并且没有缓存首次加载的情况下，会发现一个比较严重的问题

当网速低于500K/S的时候，首次访问，引导页图片无法加载完成，就直接跳转到主页。这是很不友好的用户体验，那么问题在哪？

问题在于这种切换形式的引导页，首页和引导页是一起加载的，图片和内容也是一起加载的，首页图片又太多太大导致。

加上引导页设置了默认10秒跳转到主页。所以还未等引导页图片加载完成就默认做10秒跳转动作了。

那么如何优化一下呢？

利用图片延迟加载办法优化。

实现当引导页图片加载完成后，再加载主页中的图片，即主页图片延迟加载。

利用jquery.lazyload.js脚本

第一步、引用到网页头部

"jquery.lazyload.js">

第二步、把主页所有带图片的标签，中的src改为data-original

第三步、调用lazyload

$(function() {

$("#content img").lazyload({ event : "sporty" });

});

第四步、设置触发事件为引导页图片加载完毕后

var obj = $(".indbg img");

var acHome = setTimeout(function(){

    if(obj[0].complete){  //判断引导页图片是否加载完

        if(isOpen==false){  //判断是否在引导页

            setTimeout(openFunc(1000,1500),10000); //10秒后触发主站函数

            $("#content img").trigger("sporty")  //开始加载图片

        }

        clearInterval(acHome);

    }

},10);

-------------------------------------------------------------------------------------------------------

另外、麻阳政府引导页采用多张焦点图切换也有着同样更加严重的诟病

当网速慢的时候，即使先不加载主页中图片，引导页的图片依然加载的很慢，甚至第一张图片还没有加载完成，便已切换到了第二第三张未加载完的图片了。

问题依然是，图片是一起加载的，多张引导页切换大图一起加载，怎能不慢？假设网速是100k/s，引导页3张大背景图，加起来1.5M，最快也要15秒才能加载完成。

然后想到的是，

按顺序加载图片办法优化。

想法是先让第一张图片加载，接着按顺序一张一张图片进行加载，加载完成后触发切换效果

第一步、把引导页图片标签，中的src改为data-original

第二步、编写代码

结合延时加载和顺序加载的办法可更好的优化用户体验，提升网页访问速度，一定程度上减少服务器负载。

动易系统

延时加载与顺序加载的方法

用户登录

还没有账号？