1

我做了一些搜索/故障排除无济于事。我有一个简单的图片查看器，我在 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);
            });
        });
    };
});
4

2 回答 2

0

发生这种情况是因为您的浏览器仅在您设置来源后才开始检索图像。只有当它完成加载图像时load才会触发。

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

于 2013-04-17T19:51:54.820 回答
0

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

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

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

于 2013-04-17T19:58:28.073 回答