从getElementById加载图像时加载条形图

Question

下面我有一个漫画网站的代码，我正在维护。单击各种按钮或从下拉菜单中选择页面时，图像将更改为相应的图像。但是，在加载新映像之前，图像将保留在前一个映像上。有什么办法，我可以添加一个加载条或一个旋转循环的东西，直到它已经发生？

FYI，我不是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;
   }
}