您的位置:首页> 日志> 动易系统 正文
最近好几个客户包括麻阳、芷江都参考了泸州的引导页效果。
但当网速慢,并且没有缓存首次加载的情况下,会发现一个比较严重的问题
  
当网速低于500K/S的时候,首次访问,引导页图片无法加载完成,就直接跳转到主页。这是很不友好的用户体验,那么问题在哪?
问题在于这种切换形式的引导页,首页和引导页是一起加载的,图片和内容也是一起加载的,首页图片又太多太大导致。
加上引导页设置了默认10秒跳转到主页。所以还未等引导页图片加载完成就默认做10秒跳转动作了。
那么如何优化一下呢?
 
利用图片延迟加载办法优化。
实现当引导页图片加载完成后,再加载主页中的图片,即主页图片延迟加载。
 
利用jquery.lazyload.js脚本
第一步、引用到网页头部
  1. <script src="jquery.lazyload.js"></script> 
 
第二步、把主页所有带图片的标签,中的src改为data-original
  1. <img data-original="@Power.Url.GetContentUrl... 
 
第三步、调用lazyload
  1. $(function() { 
  2.     $("#content img").lazyload({  event : "sporty" });  
  3. }); 
 
第四步、设置触发事件为引导页图片加载完毕后
  1. var obj = $(".indbg img"); 
  2. var acHome = setTimeout(function(){   
  3.     if(obj[0].complete){  //判断引导页图片是否加载完 
  4.         if(isOpen==false){  //判断是否在引导页 
  5.             setTimeout(openFunc(1000,1500),10000); //10秒后触发主站函数 
  6.             $("#content img").trigger("sporty")  //开始加载图片 
  7.         } 
  8.         clearInterval(acHome); 
  9.     } 
  10. },10); 
 
-------------------------------------------------------------------------------------------------------
 
另外、麻阳政府引导页采用多张焦点图切换也有着同样更加严重的诟病
当网速慢的时候,即使先不加载主页中图片,引导页的图片依然加载的很慢,甚至第一张图片还没有加载完成,便已切换到了第二第三张未加载完的图片了。
问题依然是,图片是一起加载的,多张引导页切换大图一起加载,怎能不慢?假设网速是100k/s,引导页3张大背景图,加起来1.5M,最快也要15秒才能加载完成。
然后想到的是,
 
按顺序加载图片办法优化。
想法是先让第一张图片加载,接着按顺序一张一张图片进行加载,加载完成后触发切换效果
 
第一步、把引导页图片标签,中的src改为data-original
  1. <img data-original="@Power.Url.GetContentUrl... 
 
第二步、编写代码
  1. <script> 
  2.     var obj = $(".indbg img"); 
  3.     var i = 0; 
  4.     obj.eq(i).attr('src', obj.eq(i).attr('data-original')) ;   //先加载第一张 
  5.     var timer=setInterval(function(){  //利用延时触发实现循环 
  6.         if(obj[i].complete){  //判断当前图片是否加载完成 
  7.             i++; 
  8.             if(i == obj.length - 1 ){ 
  9.                 jQuery(".indbg").slide({mainCell:"ul",autoPage:false,effect:"fold",autoPlay:true,vis:1}); 
  10.                 clearInterval(timer); 
  11.             } 
  12.             obj.eq(i).attr('src', obj.eq(i).attr('data-original'));  //加载下一张 
  13.             arguments.callee(); 
  14.         } 
  15.     },10); 
  16. </script> 
 
结合延时加载和顺序加载的办法可更好的优化用户体验,提升网页访问速度,一定程度上减少服务器负载。