JavaScript预加载图像

Question

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

$(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会在标签中显示旋转的"正在加载"图标.有没有办法可以做到这一点,所以它不会持续旋转,直到图像加载？我想加载页面和缩略图然后开始在后台加载较大的图像,而不在选项卡中旋转图标.

Answer 1

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

为了达到预期的结果，每个循环都需要位于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 });
    });
});