当前位置： 正文

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

建站技术 2014-09-21

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

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

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

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

一、优先加载顶部banner图片

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

<script language="javascript">   
image = new Image();   
image.src = “https://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>

赏