预加载 :
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可享受到极快的加载速度。
比如预加载这三张图片:
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
函数声明:
function preloadimg(array){
var newimg=[];
for(var i=0;i<array.length;i++){
newimg[i]=new Image();
newimg[i].src=array[i];
}
}
执行函数:
<span style="font-size:24px;">preloadimg(['1.jpg','2.jpg','3.jpg']);</span>
图片延迟加载:
1、利用基于jQuery的lazyload插件:
引用jQuery和lazyload文件
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js"></script>
</pre> <p></p><p><span style="font-size:24px">图片加入样式lazy;路径引用使用data-original; </span></p><p><span style="font-size:24px"></span></p><pre name="code" class="html"><img class="lazy" data-original="1.jpg">
<img class="lazy" data-original="2.jpg">
<img class="lazy" data-original="3.jpg">
js初始化插件并设置图片出现方式:
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({
//图片方式渐现
effect: "fadeIn",
//图片距离屏幕200px时加载图片
threshold:200,
});
});
</script>
2、利用js或jQuery:
因为要延迟加载,所以html结构中img标签的src属性去掉,把路径付给自定义另外一个属性d-src。
html结构:
<img d-src="1.jpg">
<img d-src="2.jpg">
js:循环遍历每一个img,判断当图片的一半在可视区域时,加载图片;
<script>
$(document).ready(function(){
$('img').each(function(){
if($(this).offset().top+$(this).height()/2<window.innerHeight){
$(this).attr('src',$(this).attr('d-src'));
}
})
})
<script>
这样就基本实现了自己想要的效果。