Question

我尝试使用Jquery src属性将一长串图像加载到静态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中淡入淡出并同时加载图像，那么在这些图像加载之前，您将会有相当长的延迟，从而导致内容不完整而淡入淡出。

祝你好运！

编辑：

根据我们的调查，似乎图像显示：由于某种原因没有应用于它们。对此的解决方案是在设置src属性之前确保它们都显示出来。将它放在fadeIn函数的开头：

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

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

1 个答案: