Jquery .attr并不是每次加载页面时都加载所有图像

Question

我试图使用Jquery属性将一长串图像加载到静态HTML中。我的页面中也有多个这样的元素，所以这只是作为一个示例的最大列表。一个问题是，当我点击按钮时，并不是所有的图像都会被加载。但是，如果我重新加载页面并再次单击该按钮--它们都会很好地加载。它可能是随机发生的，可能只是其中的5个，或者是7个或8个，或者全部。这里有什么问题吗？

$(window).load(function() {
    $('#mashup').click(function() {
        $('#mashupwindow').fadeIn(function() {
            $('#galleryone').attr('src', 'img/previews/13_1_20.jpg');
            $('#gallerytwo').attr('src', 'img/previews/13_1_1.jpg');
            $('#gallerythree').attr('src', 'img/previews/13_1_2.jpg');
            $('#galleryfour').attr('src', 'img/previews/13_1_3.jpg');
            $('#galleryfive').attr('src', 'img/previews/13_1_4.jpg');
            $('#gallerysix').attr('src', 'img/previews/13_1_5.jpg');
            $('#galleryseven').attr('src', 'img/previews/13_1_6.jpg');
            $('#galleryeight').attr('src', 'img/previews/13_1_7.jpg');
            $('#gallerynine').attr('src', 'img/previews/13_1_8.jpg');
            $('#galleryten').attr('src', 'img/previews/13_1_9.jpg');
            $('#galleryeleven').attr('src', 'img/previews/13_1_10.jpg');
            $('#gallerytwelve').attr('src', 'img/previews/13_1_11.jpg');
            $('#gallerythirteen').attr('src', 'img/previews/13_1_12.jpg');
            $('#galleryfourteen').attr('src', 'img/previews/13_1_13.jpg');
            $('#galleryfifteen').attr('src', 'img/previews/13_1_14.jpg');
            $('#gallerysixteen').attr('src', 'img/previews/13_1_15.jpg');
            $('#galleryseventeen').attr('src', 'img/previews/13_1_16.jpg');
            $('#galleryeighteen').attr('src', 'img/previews/13_1_17.jpg');
            $('#gallerynineteen').attr('src', 'img/previews/13_1_18.jpg');
            $('#gallerytwenty').attr('src', 'img/previews/13_1_19.jpg');
            $('#gallerytwentyone').attr('src', 'img/previews/13_1_21.jpg');
            $('#videoframe').hide();
            $('#captionone').html('...');
            $('#captiontwo').html("...");
            $('#captionthree').html("...");

            $('#mashupwindow').html($("#tableToClone").clone());
        });
    });
});

这里是html模型，我的jquery被推入：

<div id="mashup"></div>
<div id="mashupwindow" class="mainscreen irbispanel"></div>
<div style="display:none">
    <table id="tableToClone" class="ts">
        <tr>
            <th class="ts-yw4l" rowspan="3">
                <img id="galleryone" src="" class="previewing">
                <img id="gallerytwo" src="" class="previewing">
                <img id="gallerythree" src="" class="previewing">
                <img id="galleryfour" src="" class="previewing">
                <img id="galleryfive" src="" class="previewing">
                <img id="gallerysix" src="" class="previewing">
                <img id="galleryseven" src="" class="previewing">
                <img id="galleryeight" src="" class="previewing">
                <img id="gallerynine" src="" class="previewing">
                <img id="galleryten" src="" class="previewing">
                <img id="galleryeleven" src="" class="previewing">
                <img id="gallerytwelve" src="" class="previewing">
                <img id="gallerythirteen" src="" class="previewing">
                <img id="galleryfourteen" src="" class="previewing">
                <img id="galleryfifteen" src="" class="previewing">
                <img id="gallerysixteen" src="" class="previewing">
                <img id="galleryseventeen" src="" class="previewing">
                <img id="galleryeighteen" src="" class="previewing">
                <img id="gallerynineteen" src="" class="previewing">
                <img id="gallerytwenty" src="" class="previewing">
                <img id="gallerytwentyone" src="" class="previewing">
                <iframe id="videoframe" src="" class="previewing"></iframe>                             
            </th>
            <p id="captionone"></p>
            <p id="captiontwo"></p>
            <p id="captionthree"></p>
        </tr>
    </table>
</div>

下面是css部分，负责对它们进行样式化和褪色，以防万一：

.previewing{
    padding-bottom:10px;
    padding-top:0px;
    margin-bottom:0px;
    width:600px;
    border-width: 0px;
    border-style:none;
        -webkit-animation: fadein 2s;
       -moz-animation: fadein 2s; 
        -ms-animation: fadein 2s;
         -o-animation: fadein 2s; 
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Answer 1

您试过在没有fadeIn函数的情况下执行它吗？

我想知道你是否正患上了Chome渲染的小故障。尝试将-webkit-transform: scale3d(1,1,1);应用于您的元素，看看这是否有帮助。

否则，我建议尝试预加载这些图像。如果在div中褪色，同时加载图像，则在加载这些图像之前会有相当长的延迟，导致div内容不完整。

祝好运!

编辑：

根据我们的调查，这些图像似乎正在显示:没有一个是出于某种原因而适用于它们的。解决这一问题的方法是在设置src属性之前确保它们都显示出来。将其放在fadeIn函数的开头：

$('.previewing').css('display','block')