1

我想制作一个 JavaScript (jQuery)、HTML 画廊，它有 60 张图片。我希望他们一一加载。它们被命名为 1.jpg、2.jpg、3.jpg... 等。

所以我开始制作一个<img id="loader" style="display:none;" src=""/> 包含实际加载图像的 this，我用脚本为它提供 src，然后等待它加载，然后将相同的 src 提供给它的实际目的地：

<img class="active_pic" id="a1" src="img/load.gif"/>

完成后，我开始加载第二张图片。我怎么做？

我尝试使用递归来实现它，这是一个调用自身的函数，但它不会等待图像加载。我用这个：

$("#loader").attr("src",pic);   
$("#loader").ready(function(){$("#a"+active).attr("src",pic);
4

2 回答 2

1

您可以使用 JS 代码加载图像

var img = new Image();

img.onload = function() {
    // do stuff after image is loaded
};

img.src = pic_url;

更新

JS 函数存根和使用示例

<script>
function load_image(img_url)
{
    // show overlay, spinner, whatever

    var img = new Image();
    img.onload = function() {
        // add <img> tag
        // hide overlay, spinner, whatever
    };
    img.src = img_url;
}
</script>

<a href="jaavscript:load_image('/images/test.jpg');">load image</a>
于 2013-07-27T19:14:01.187 回答
0

你可以使用图片的onload事件。但是，如果您的图像被缓存，它将无法正常工作，因此您可以使用它：

$('img[id|="a"]').each(function() {
    if(this.complete) $(this).trigger('load');
});

var doOnLoad=function(){
    var id=parseInt($(this).attr('id').substr(1));
    $(this).removeClass("active_pic");
    id++;
    $('#a'+id).attr("src",pic[id]).one('load', doOnLoad).addClass("active_pic");
};

$(".active_pic").one('load', doOnLoad);

pic 必须是一个以 id 为键、src 为值的数组。

于 2013-07-27T19:19:14.450 回答