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

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

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

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

一、优先加载顶部banner图片

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

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

 

二、网页图片延迟加载

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

例如:

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

修改成:

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

第二步:

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

<script language="javascript">  
  
imgs = document.getElementsByTagName("img");  
imgsnum = imgs.length;  
for(imgi = 0 ;imgi < imgsnum;imgi++){  
     if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != null)  
        imgs[imgi].src = imgs[imgi].getAttribute('thissrc');  
}  
  
</script>