图片先垫底图，加载出来以后替换真图的方法

最新推荐文章于 2023-02-08 02:49:06 发布

凌晨独舞

最新推荐文章于 2023-02-08 02:49:06 发布

阅读量2k

点赞数 1

分类专栏： Javascript 文章标签：图片替换

本文链接：https://blog.csdn.net/Merciwen/article/details/76165094

版权

Javascript 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

 <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;
    }

把图片写在数组里面，然后遍历数组，在回调中加载就可以了。