有时网页中含有大量的图片时,会影响加载速度,降低用户体验。这里就需要对网页进行优化,延迟不要重的图片加载,下面就以华丹官网(https://www.huadaninfo.com)首页优化说明。

首页中有一栏目是典型客户,含有大量图片。如下图:

典型客户分三个页签:政府客户、企业单位、系统集成商。

如果页面加载时,所有的客户图片都一次性加载,势必有延迟,影响体验。其实这里对于后面两个页签中的图片是可以不立即加载的,所以可以优化成点击时才加载。

方法如下:

<div class="hd">

<ul>

<li class="on col-xs-4">政府单位</li>

<li class="col-xs-4" id="qykhhd">企业单位</li>

<li class="col-xs-4" id="jcskhhd">系统集成商</li>

</ul>

</div>

即在两个不初始显示的页面添加id,便于绑定事件。然后在将客户图片对应的<img>做如下处理:

<ul id="jcskh" init="0">

<li class="col-lg-2 col-xs-4">

<img src="" imgsrc="/images/indexjcs/kehu3.png"/>

</li>

<li class="col-lg-2 col-xs-4">

<img src="" imgsrc="/images/indexjcs/kehu3-1.jpg"/>

</li>

<li class="col-lg-2 col-xs-4">

<img src="" imgsrc="/images/indexjcs/kehu3-2.png"/>

</li>

......

即,在img区块容器<ul>中添加id及init="0"属性。<img>中src设成"",并添加imgsrc属性,将赋值为图片的路径,这样页面加载时这些图片就不会加载。

然后在<head>中增加js函数:

<script type="text/javascript">

  function init()

  {

  $("#jcskhhd").click(function(){initKhImg('jcskh');});

  $("#qykhhd").click(function(){initKhImg('qykh');});

  }

  function initKhImg(parentId)

  {

  if($("#"+parentId).attr("init")=="1")

      return;//已初始化直接返回

  $("#"+parentId+" img").each(function (i) {

      $(this).attr("src",  $(this).attr("imgsrc")); //遍历指定元素下所有图片,将imgsrc值赋给src属性,图片加载显示。

  });

  $("#"+parentId).attr("init","1");

  }

</script>

最后在<body>中添加事件onload初始化,<body onload="javascript:init()">

通过以上操作就完成了图片用时再加载,加快页面加载速度,提高用户体验。另外对于一些特别大的图片,也可以放到onload事件中加载,优先加载重要内容,同时也要减少通过js布局的代码量。