6

我正在尝试预加载图像，以下代码有效：

$(document).ready(function(){
    $(".member-photos img").each(function(){
        var id = $(this).attr("data-id");
        var file = $(this).attr("data-file");
        var img = new Image();
        img.src = "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false";
    });
});

但我想解决的问题是 Chrome 在选项卡中显示旋转的“正在加载”图标。有没有办法我可以做到这一点，所以它在图像加载之前不会持续旋转？我希望加载页面和缩略图，然后开始在后台加载较大的图像，而不在选项卡中使用旋转图标。

4

3 回答 3

1

还没有测试我的想法。

我认为当文档准备好时您正在同步加载图像文件，因此 Chrome 会告诉用户加载尚未完成。

不显示旋转图像，您应该使用 ajax 调用服务器来接收图像，您可以将其添加到文档或什么都不做（因为它已经被缓存）

$.ajax({ url : <<image_url>>, cache: true, processData : false, })
.success(function(){ 
  $(document).append( $("<img/>").attr("src", <<image_url>>).hide() );
});
于 2013-02-14T05:13:59.030 回答
1

使用 bighostkim 答案的 ajax 部分和load()事件，我得到了我想要的

为了达到预期的结果，每个循环都需要在load()事件内。将其放置在ready()事件中会导致图像在页面图像之前开始加载，从而导致页面图像在队列中挂起并在预加载的图像之后加载。大多数浏览器只允许同时从同一主机加载几个项目，其他浏览器必须等到一个点打开（除非它来自不同的主机）。

$(window).load(function(){
    $(".member-photos img").each(function(){
        var id = $(this).attr("data-id");
        var file = $(this).attr("data-file");
        $.ajax({ url : "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false", cache: true, processData : false });
    });
});
于 2013-02-14T15:59:24.250 回答
0

制作了一些东西并添加了图像 10 张图像。他们装载没有任何喧嚣。我只是在我的互联网上尝试过它是慢龟。

我认为浏览器会等到您功能的所有图像都像您一样完成$(document).ready( function() { });。

小提琴

var i = 1;
$(document).ready(function(){
    $(window).stop();
    $("img").hide();
    $("img").each(function(){
        var source = $(this).attr("src");
        var img = new Image();
        img.className = i;
        img.src = source;
        $('body').append(img);
        $("."+i).hide().fadeIn();
        i++;
    });
});
于 2013-02-14T05:10:32.453 回答