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

尚未测试我的想法。

我认为您在文档准备就绪时会同步加载图片文件，因此Chrome会告诉用户没有加载文件。

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

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

Answer 2

使用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 });
    });
});

Answer 3

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

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

Fiddle

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++;
    });
});

JavaScript预加载图像

3 个答案: