JavaScript预加载图像

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

$(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在选项卡中显示旋转的“加载”图标。有没有办法让它在图像加载之前不会一直旋转？我希望加载页面和缩略图，然后开始在后台加载较大的图像，而不使用选项卡中的旋转图标。

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

我认为浏览器会等到函数的所有图像都完成，因为您有

$（document）.ready（function（）{}）


我还没有测试过我的想法

我认为当文档准备就绪时，您正在同步加载图像文件，所以Chrome告诉用户加载尚未完成

不显示旋转图像，您应该使用ajax调用服务器来接收图像，您可以将其添加到文档中，也可以不执行任何操作（因为它已经被缓存）

$.ajax（{url:，cache:true，processData:false，}）
.success（函数（）{
$（文档）.append（$（“>）.hide（））；
});
使用bighostkim答案中的ajax部分和
load（）
事件，我得到了我想要的

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

你什么时候显示throbber？嘿，我想这可能没有什么帮助，但是你能在
.each（）之前添加
window.stop（）；
函数，然后检查。它将停止加载DOM。但我认为将继续您的函数。这基本上是有效的。不过我做的有点不同。我没有添加成功，我将每个循环移动到
$（window）.load（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++;
    });
});

$.ajax({ url : <<image_url>>, cache: true, processData : false, })
.success(function(){ 
  $(document).append( $("<img/>").attr("src", <<image_url>>).hide() );
});

$(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 });
    });
});