版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
代码如下
<div class="box">
<p>
<a href="javascript:;" class="btn" data-control="prev">上一页</a>
<a href="javascript:;" class="btn" data-control="next">下一页</a>
</p>
<img alt="pic" id="img" width="800" src="" />
</div>
<script src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
//无序加载 通过 $.each()方法对图片进行了同时加载
//有序加载 是从imgs数组的第一张开始往后加载
var imgs = [
'http://img1.imgtn.bdimg.com/it/u=3349546634,3754791255&fm=26&gp=0.jpg',
'http://d-pic-image.yesky.com/1080x-/uploadImages/2019/044/59/1113V6L3Q6TY.jpg',
'http://img0.imgtn.bdimg.com/it/u=2960231721,1241541633&fm=26&gp=0.jpg',
'http://img3.imgtn.bdimg.com/it/u=2094296397,2457159940&fm=26&gp=0.jpg'
];
var len = imgs.length,
count = 0,
index = 0;
$('#img').attr('src', imgs[index]);//加载第一张图片
load();
function load() {
var imgObj = new Image();
// 有序加载
$(imgObj).on('load error', function () {
if (count >= len) {
//图片加载完毕
} else {
load();
}
count ++;
});
imgObj.src = imgs[count];
}
$('.btn').on('click', function () {
if ('prev' === $(this).data('control')){//上一张
index = Math.max(0, --index);
} else { //下一张
index = Math.min(len - 1, ++index);
}
document.title = (index + 1) + '/' + len;
$('#img').attr('src', imgs[index]);
});
</script>
实现图片预加载的关键代码是 new Image() ,例子中使用的是load事件和递归调用实现的有序预加载。