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

从getElementById加载图像时加载栏

1 个答案: