华丹学堂-HTML页面中延迟加载图片提高网页加载速度

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

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

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

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

方法如下：

<ul>

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

</ul>

</div>

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

</li>

</li>

</li>

......

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

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

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布局的代码量。