我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.
它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".
谁有更好的解决方案？
编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.
是否可以通过jQuery事件检测何时加载所有图像？
理想情况下,应该有一个
$(document).idle(function()
{
}
要么
$(document).contentLoaded(function()
{
}
但我找不到这样的事情.
我想过附上这样的事件:
$(document).ready(function()
{
var imageTotal = $('img').length;
var imageCount = 0;
$('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}
但如果图像无法加载,这会破坏吗？在正确的时间调用该方法至关重要.
更新: 此错误已被至少两个其他人确认.即使您没有阅读我的完整帖子 - 如果您正在阅读本文并使用JQuery 1.3.1,那么如果您依赖于在DOM完成时但在页面图像加载之前要执行的任何处理程序,请停止使用它.
Update2:感谢Tom(用户ID 20!)在jQuery bug跟踪器上发布了票证的链接.
Update3 - 2009/01/28:该问题已得到妥善解决(对于那些无法恢复到1.2.6的人来说).对于目前使用1.3.1且需要立即修复的任何人,您可以阅读下面接受的答案以获取方向.谢谢约翰.
我刚刚升级到JQuery 1.3.1,我花了几个小时才意识到我心爱的人
$(function( ) { ... }
语法现在在执行函数体之前等待整个页面加载(包括图像).在尝试整合雅虎的菜单时,我看到了奇怪的行为.(幸运的是,我的页面上有一些缓慢的加载图像,这让我意识到了这个问题)!
我做了一个测试文件,因为我认为发生了一些更复杂的事情,但即使这个简单的文件,我仍然有相同的症状.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(function() {
alert("Ready");
});
</script>
</head>
<body>
<img src="<PATH_TO_DYNAMIC_IMAGE>_1.jpg" />
<img src="<PATH_TO_DYNAMIC_IMAGE>_2.jpg" />
<img src="<PATH_TO_DYNAMIC_IMAGE>_3.jpg" />
<img src="<PATH_TO_DYNAMIC_IMAGE>_4.jpg" />
</body>
不同版本的JQuery有不同的结果:
这是怎么回事!这是一个新功能(我无法想象为什么)或一个错误？
重要提示:这似乎只是IE中的一个问题,而不是Firefox
对不起,我没有一个公开可访问的动态图像文件,以便其他人更容易看到这一点.如果你想测试它我建议使用从谷歌图像中随机挑选的大图像文件并清除你的缓存.
如何从服务器或浏览器缓存中检测图像何时完成加载？我想在同一个<img/>标签中加载各种图像,并检测新图像的加载何时完成.
谢谢.
我正在写一个jQuery插件,处理一个简单的调用插件功能(像一堆图像动画$("#image1").anims()这里#image1是一个图像),但是由于该插件的部分功能,我用$(this).width()在获取图像正确的宽度启动函数调用.
但是,由于调用插件函数$(document).ready,它试图在图像加载之前获取图像的宽度,因此它总是返回0.是否有解决方法？
我有一个使用外部CSS加载的外部背景图像的Web应用程序.现在,可以在图像完全渲染之前使用应用程序,从而创建奇怪的视觉效果.
如何在图像完全加载之前暂停脚本执行？
它可以使用普通的JavaScript或jQuery.因为图像是在外部CSS中加载的,所以我读过的正常触发器不起作用.
好吧,我对此失去了理智.我确实在这里阅读了SO和谷歌,我甚至有预装置设置(在这里找到了SO),但我找到的插件/代码都没有帮助我.
我想要做的是:等到所有图像都预先加载,然后才执行所有其他javascript代码.就我而言,它可以(但不是必须)有一个"加载......"的消息.
事实上,我在身体背景中有一个非常大的图像和另外两个也更大的图像,所以我想预加载它们,这样它们就会立即显示,并且不会有那种难看的"加载"图像效果.
这就是我现在使用的,但它并不好:
$(document).ready(function()
{
preloadImages();
...some other code...
function preloadImages(){
imagePreloader([
'images/1.png',
'images/2.jpg',
'images/3.png',
]);
}
function imagePreloader(arrayOfImages) {
$(arrayOfImages).each(function(){
(new Image()).src = this;
});
}
}
我不知道,也许我应该在.ready()之外的某个地方调用这个预加载器？或者......那样,请帮忙......
顺便说一句,是的,我也读过这篇文章,我不知道为什么,但.ready()对我来说更快:(
编辑:
好的,所以最后我得到了这个工作.我的问题？我把等待的div设置错了.这是我现在的代码:我有加载div,我在上面显示所有图像,然后当所有图像加载时(使用$(window).load(function(){...});如我所建议,隐藏该div.
<div id="loading">
<div id="waiting">
<img class="loadingGif" src="images/loading.gif">
</div>
</div>
#loading
{
background-size: 100%;
background-color:#000;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
z-index:999;
}
#waiting
{
margin-left: auto;
margin-right: auto;
position:absolute;
top: 39%;
left: 27.81%;
width: 45%;
height: 150px;
background-color: #FFF;
border: 12px solid #FF771C; …我有一些jquery脚本在窗口加载后运行
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
当我知道一些图像应该是"是"时,我总是得到一个"不".当我在chrome中跟踪脚本时,我注意到$(this).width()总是返回0.我用谷歌搜索并且一些建议是图像没有加载但是这里window.load我已经使用了我认为应该在一切都已加载后运行的方法.有任何想法吗？？
谢谢你提前帮助
我想使用Color Thief,这是一个允许你提取图像主色的脚本.
不幸的是,我无法让代码工作.我希望主色是被称为div的背景色mydiv.
这是我到目前为止所拥有的:http://jsfiddle.net/srd5y/4/
由于交叉链接问题,更新了代码/转移到我自己的服务器:http://moargh.de/daten/color-thief-master/test.html
JS
var sourceImage = 'https://www.google.de/intl/de_ALL/images/logos/images_logo_lg.gif';
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
HTML
<div id="mydiv"></div>
谢谢你的帮助!
如果那些是经典的HTML图像,那么很容易让javascript等待加载一些图像.
但如果将图像作为CSS加载,我无法想象如何做同样的事情backuground-image!
可能吗？
jQuery .load()方法似乎不适用..而且我缺乏想法