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

Question

我进行了一些搜索/故障排除，但无济于事。我有一个简单的图片查看器，我在 JQuery .load() 函数中添加了让动画等待淡入，直到图像加载。这方面效果很好，但它导致了一个奇怪的错误。如果您查看带有箭头的图片，它会开始产生一个奇怪的延迟，发生在淡出之前 (fadeTo(200,0))。这对我来说毫无意义，因为在那条线之前没有任何东西会导致滞后。

（注意，当 .load() 函数不存在时，不会发生这种延迟）

这是下一个按钮（左侧的箭头按钮）的 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();
});

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