JavaScript预加载图像

问题描述

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

I am trying to preload images, the following code works:

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

But the issue I would like to solve, is that Chrome displays the spinning "Loading" icon in the tab. Is there a way I can do this so it doesn't continuously spin until the images have loaded? I would like for the page and thumbnails to load then start loading the larger images in the background without the spinning icon in the tab.

推荐答案

使用bighostkim的答案的ajax部分，以及 load（）事件，我得到了我想要的东西

Using ajax part of bighostkim's answer, and the load() event, I got what I wanted

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

To achieve the desired results, the each loop needed to be within the load() event. Placing it in the ready() event causes the images to start to load before the page images, causing the page images to pend in the queue and load after the preloaded images. Most browsers only allow for a few items to load from the same host simultaneously, the others must wait till a spot opens up (unless it is from a different host).

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

这篇关于JavaScript预加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！