从 getElementById 加载图像时加载栏

Question

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

仅供参考，我对 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;
   }
}

从 getElementById 加载图像时加载栏

Loading bar while image loads from getElementById

javascript

jquery

loading

getelementbyid