<div class="content">
<div class="content_show"><img class="p0" data-imgtype="0621000400744002" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif" alt=""></div>
<div class="content_choose one"> <img class="p1" data-imgtype="0621000400744002" data-cache="" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
<div class="content_choose two"> <img class="p2" data-imgtype="0621000400715002" data-cache="" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
<div class="content_choose three"><img class="p3" data-imgtype="0621000400717002" data-cache="" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
</div>
<div class="to_play_box">
<img class="to_play first_in" src="img/to_play.png">
</div>
<div class="custom">
<div class="custom_box"><img src="img/custom1.png" alt=""></div>
<div class="custom_box custom_bg"><img class="p4" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
<div class="custom_box custom_bg"><img class="p5" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
<div class="custom_box custom_bg"><img class="p6" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif"></div>
<div class="clear"></div>
</div>
html部分 先用一张图代替,这里使用的是
https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif
然后我们在js部分
/*添加默认图*/
var gifList = ["img/choose_one.gif", "img/choose_one.gif", "img/choose_two.gif", "img/choose_three.gif",
"img/custom2.gif","img/custom3.gif","img/custom4.gif"];
for (var i = 0; i < gifList.length; i++) {
(function (index) {
loadImage(gifList[index], function () {
$(".p" + index).attr("src", gifList[index]).hide().fadeIn(200);
})
})(i)
}
function loadImage(a, b) {
var c = new Image;
c.onload = function () {
c.onload = null,
b(c)
},
c.src = a;
}
把图片写在数组里面,然后遍历数组,在回调中 加载就可以了。