网页加速优化教程之js图片延迟加载与指定图片优先加载

  • A+
所属分类:wp教程

网页加速优化教程之js图片延迟加载与指定图片优先加载

最近有朋友在做产品介绍网页,但是遇到一个问题,那就是图片太多,导致加载速度慢,而且文字先加载,图片最后加载,体验优先,于是就需要用到图片延迟加载,用户浏览有限加载一屏的图片!但是他最顶部有一张图片banner却想最先加载,那么我们将如何突破呢?

首先想到的肯定是ajax异步加载,ajax延迟加载。不过图片的位置太多,修改起来比较麻烦,所以就从其他方法入手。

要实现这样的效果,其实很简单。一段js代码就能实现。

一、优先加载顶部banner图片

在网页<head></head>之间加入下面这段script,wordpress等动态网站通常是加在header.php中。

  1. <script language="javascript">
  2. image = new Image();
  3. image.src = “http://www.luoxiao123.cn/images/2014/09/224736ljd3yfqgdhmey899.jpg.thumb_.jpg”;  
  4. </script>

 

二、网页图片延迟加载

第一步,先将所有需要最后加载的图片代码进行修改:  (将src属性替换成thissrc)

例如:

  1. <img src="/images/ad_1.jpg">

修改成:

  1. <img thissrc="/images/ad_1.jpg">  

第二步:

将下面的js代码放在页面最底部:

  1. <script language="javascript">
  2. imgs = document.getElementsByTagName("img");
  3. imgsnum = imgs.length;
  4. for(imgi = 0 ;imgi < imgsnum;imgi++){
  5.      if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != )
  6.         imgs[imgi].src = imgs[imgi].getAttribute('thissrc');
  7. }
  8. </script>
weinxin
我的微信
这是我的微信扫一扫
SJ

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: