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

为了顺利进行，请执行以下操作：

最小化图像尺寸（每张图像400-600 kb非常多。您可以将图像压缩1.5-2倍）。
如果您拥有管理员权限，请尝试优化服务器性能。它响应缓慢。
在幻灯片放映中为所有图像使用预加载机制。在此主题中阅读有关预加载的更多信息：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();
});

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

JQuery .load（）功能导致奇怪的延迟

2 个答案: