javascript - 从 getElementById 加载图像时加载栏

Question

下面是我正在维护的漫画网站的一些代码。当您单击各种按钮或从下拉菜单中选择页面时，图像将更改为相应的图像。但是，图像仍保留在上一个图像上，直到加载新图像。有什么方法可以添加一个加载栏或一个旋转圆圈的东西，直到它发生为止？

仅供引用，我对 JS 不太了解，这是我自己创建的代码。非常感谢您的帮助。

// Drop Down Menu, next and previous buttons

// Buttons
$(document).ready(function () {
    var dd = $('#HailComic');
    var max_len = dd.find('option').length;
    $('#nextpage').click(function () {
        var x = dd.find('option:selected').index();
        if (max_len == x + 1) x = -1;
        dd.find('option').eq(x + 1).prop('selected', true);
        document.getElementById("hail_image").src="images/comic/hail_" + HailComic.options[HailComic.selectedIndex].value + ".jpg";
    });
    $('#previouspage').click(function () {
        var x = dd.find('option:selected').index();
        if (0 == x + 1) x = max_len;
        dd.find('option').eq(x - 1).prop('selected', true);
        document.getElementById("hail_image").src="images/comic/hail_" + HailComic.options[HailComic.selectedIndex].value + ".jpg";
    });
    $('#lastpage').click(function () {
        var x = max_len;
        dd.find('option').eq(x - 1).prop('selected', true);
        document.getElementById("hail_image").src="images/comic/hail_" + HailComic.options[HailComic.selectedIndex].value + ".jpg";
    });
    $('#firstpage').click(function () {
        dd.find('option').eq(0).prop('selected', true);
        document.getElementById("hail_image").src="images/comic/hail_001.jpg";
    });
});




// List Changing
$(document).ready(function(){
    // Select
    var changeHailImage = function () { 
    document.getElementById('hail_image').src = "images/comic/hail_" + this.options[this.selectedIndex].value + ".jpg"
    }

    var HailList = document.getElementById('HailComic');
    HailList.addEventListener('change', changeHailImage, false);
});

Answer 1

您可以使用 img.load() 函数来实现此目的。请检查笔http://codepen.io/anon/pen/VvwWWj

var changeHailImage = function () { 
    document.getElementById('hail_image').src = 'loading.gif';//get a loading image
    var img = new Image();
    img.src = "images/comic/hail_" + this.options[this.selectedIndex].value + ".jpg";
    img.onload = function () {
        document.getElementById('hail_image').src = img.src;
   }
}