Question

我有一个包含多个图像的页面，我想使用加载程序使所有图像加载时看起来更好。

问题：只有第一个加载图片才会隐藏，以便为实际图片让路，其余图片不隐藏

HTML：

<img src="/images/loaders/loader.gif" id="imgLoader">
<img src="/path/to/image1.jpg" class="sideImage">
<img src="/images/loaders/loader.gif" id="imgLoader">
<img src="/path/to/image2.jpg" class="sideImage">
<img src="/images/loaders/loader.gif" id="imgLoader">
<img src="/path/to/image3.jpg" class="sideImage">
<img src="/images/loaders/loader.gif" id="imgLoader">
<img src="/path/to/image4.jpg" class="sideImage">

JQuery的：

$(document).ready(function(){
    $('#imgLoader').show();
    var totalImages = $(".sideImage").length;
    var iLoaded = 0;
    $(".sideImage").each(function (){
        $(this).bind("load", function(){
            iLoaded++;
            if(iLoaded == totalImages){
                $('#imgLoader').hide();
            }
            $(this).attr('src', $(this).attr("src"));
        });
    });
});

Answer 1

使用类而不是ID - 将imgLoader ID替换为类并将其作为目标。在同一页面上具有多个相同的ID是无效的标记，这就是为什么您的jQuery仅影响第一个图像的原因（因为它不希望在页面上找到多个具有该ID的元素）。 ID是唯一的 - 没有例外。在任何其他情况下都应该使用类。

多个图像加载器一页

1 个答案: