导致奇怪延迟的JQuery .load()功能

Question

我已经做了一些搜索/故障排除，但都没有用。我有一个简单的图片查看器，并添加了JQuery .load()函数，以使动画等待淡入，直到图像加载完毕。这方面工作得很好，但它导致了一个奇怪的错误。如果您查看带有箭头的图片，它开始产生一个奇怪的滞后，它发生在淡出之前(fadeTo(200,0))。这对我来说没有任何意义，因为在这行之前没有任何东西会导致延迟。

(请注意，当.load()函数不存在时，不会出现此延迟)

下面是next按钮(左边的箭头按钮)的JQuery代码。"largeImage“是您看到的主图像。

转到http://www.snowtheband.com/temporary/media.html，点击“图片”下的一个缩略图，进入图片查看器。

$("#nextButton").click(function(){
    picNumber=parseInt(picNumber);
    if (picNumber<7){
        picNumber+=1;
        picClass="."+picNumber;
        var loadPic="images/photos/"+picNumber+"_large.jpg";
        descText=$(picClass).prop("alt");
        $("#description").fadeTo(200,0,function(){
            $("#description").html(descText).fadeTo(200,1);
        });
        $("#largeImage").fadeTo(200,0,function(){
            $("#largeImage").prop("src",loadPic);
            $("#imagecontainer img").load(function(){
                $("#largeImage").fadeTo(200,1);
            });
        });
    };
});

Answer 1

这是因为您的浏览器仅在设置源之后才开始检索图像。仅当其完成load将触发的图像的加载时。

如果你想让它顺利运行，你必须预先加载图像。

Answer 2

要使其顺利完成，请执行以下操作：

1. 最小化图像大小(每个图像400-600 kb是相当多的。您可以将图像压缩1.5-2倍)。
2. 如果您具有管理员权限，请尝试优化您的服务器性能。它的反应很慢。
3. 对幻灯片放映中的所有图像使用预加载机制。有关预加载的详细信息，请参阅本主题：Preloading images with jQuery

我建议你这样实现预加载：

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
$(function() {
    var images = [], i;
    for (i = 0; i < 7; i += 1) {
       images.push("images/photos/" + (i + 1) + "_large.jpg");
    }
    $(images).preload();
});

更新：修复了脚本。出现语法错误。