JavaScript预加载镜像
JavaScript预加载镜像
提问于 2013-02-14 04:46:14
我正在尝试预加载图像，以下代码可以正常工作：
$(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会在标签页上显示旋转的“加载”图标。有没有一种方法可以让它在图像加载之前不会持续旋转？我想为页面和缩略图加载，然后开始加载较大的图像在背景中没有旋转图标的标签。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-14 15:59:24
使用bighostkim答案中的ajax部分，以及load()事件，我得到了我想要的东西
要获得所需的结果，每个循环都需要在load()事件内。将其放在ready()事件中会导致图像在页面图像之前开始加载，导致页面图像在队列中挂起并在预加载的图像之后加载。大多数浏览器只允许从同一主机同时加载几个项目，其他浏览器必须等到一个spot打开(除非它来自不同的主机)。
$(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 });
});
});Stack Overflow用户
发布于 2013-02-14 05:13:59
还没有测试我的想法。
我认为当文档准备好时，你正在同步加载图像文件，所以Chrome告诉用户加载还没有完成。
为了不显示旋转的图像，您应该使用ajax调用服务器来接收图像，您可以将其添加到文档中，也可以什么也不做(因为它已经被缓存)
$.ajax({ url : <<image_url>>, cache: true, processData : false, })
.success(function(){
$(document).append( $("<img/>").attr("src", <<image_url>>).hide() );
});Stack Overflow用户
发布于 2013-02-14 05:10:32
制作了一些东西并添加了图像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++;
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14867964
复制
相似问题
JavaScript镜像预加载
JavaScript镜像预加载不起作用
jQuery镜像预加载
预加载fancybox镜像
预加载镜像目录
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
