图片库的图片预装器?这是怎么回事

Image preloader one by one for gallery? What is wrong with this?

本文关键字：怎么回事 图片库      更新时间：2023-09-26

我想制作一个JavaScript（jQuery），HTML库，它有大约60张图片。我希望他们一个接一个地加载。它们被命名为1.jpg、2.jpg、3.jpg等

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

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

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

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

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

您可以使用从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>

您可以使用图片的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为值的数组。

相关文章：