问题标签 [waitforimages]

我写了一个jQuery 插件，我最近做了它，所以回调可以访问this，这是原始选择器，所以你可以做......

这看起来很像您在 jQuery API 中所期望的一些代码。

然而，jQuery 总是this以原生 DOM 元素的形式提供，因此您必须将其包装起来$()才能开始在其上调用 jQuery 的方法。

最初，我this作为 jQuery 对象提供。但是后来，在观察了jQuery对 的处理之后this，我改变了它。

什么是最好的方法？是否提供包装？

在这个例子中，当我单击按钮时，我可以获得以下代码来在div#add元素中创建动态图像，但是加载事件img不起作用。

我也尝试将onload事件设置为动态img，但我没有触发事件。任何帮助深表感谢。

更新（2011-10-24 18:55 EST） ： Load-Event的JQuery 文档似乎说明了以下内容。

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。这些是：

- 它不能始终如一地工作，也不能可靠地跨浏览器
- 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
- 它不会正确地冒泡 DOM 树 -
可以停止触发已经存在于浏览器缓存中的图像

我想使用 load 事件不是一个故障安全的跨浏览器解决方案。

更新（2011-10-28 15:05 EST）：感谢@Alex，我能够使用他的waitForImages插件并制作一个监听器（我不确定这是否是正确的术语）来确定图像何时被加载。

因此，现在确定图像是否已加载最多有 500 毫秒的延迟。这看起来合理吗？这是查看是否已加载动态创建的 img 标签的最佳方法吗？

setInterval杰出：加载所有图像后，我必须停止触发该功能。我仍然需要弄清楚这方面的细节。

我需要做的就是将图像定位在其父 div 的中心。
首先，我试过这个。

它失败的原因是 $('#image1').height() 和 width() 在完全下载之前给出了 0。
所以我试图继续检查图像的大小，直到它具有特定的宽度和高度。
像，

还是不行。
因为 $('#image').width() 在 IE8 中下载之前返回 28px（顺便说一下，IE7 很好）

所以我终于尝试了这样的waitForImages jQuery 插件 ，

它适用于缓存图像，但不适用于非缓存图像。在Image1具有宽度和高度
之前调用该函数。 我该怎么办？

我正在开发一个插件来进行图像与图像的混合。您可以在以下网址看到它：http ://www.psfinteractive.it/bigoom/try.html 我用两组图像调用插件两次，但渲染的图像属于第二组。有任何想法吗？

编辑：实际上在纠正错字之后，现在什么都没有呈现，帮助！

};

这现在部分地并且仅在 Firefox 中起作用，似乎以某种方式没有读取新的组合。有任何想法吗？我在文件中通过 php 和 html 放置了一些无缓存标头：

http://www.psfinteractive.it/bigoom/try.php

我在我的页面上使用fullscreenr jQuery 插件。首先，我隐藏图像，然后使用 waitforimage 插件对其运行 fullscreenr，最后使用 fadeIn 显示它：

我的问题是，不知何故，有些事情不太正常。这在我的开发盒上运行良好，但是当我尝试在网络上加载页面时，fadeIn 在图像完全加载之前开始。

我尝试向 fullscreenr 函数添加回调，但结果相同。我能做些什么来确保它正常工作？我也尝试使用 $bg.load() 来加载 fullscreenr，但没有运气。

谢谢！

我正在将一个变量设置为图像的宽度，以便我可以使描述 div 以正确的宽度出现。但是，jQuery 似乎没有适合我需要的回调函数。我该怎么办？

我最关心的是 photo_width = $(this).width(); 周围的代码 因为我想确保在发生之后执行以下代码。想法？我知道描述 div 设置不正确，因为需要单击 2 次才能正确设置！您可以在 www.graysonearle.com/newtest 上看到错误，然后单击第一个框“Frog Utopia”并单击几个缩略图。

我在测试 Masonry 时注意到，如果我在 Firefox 中移位重新加载（硬重新加载），那么布局将偏离页面中任何图像的高度。我认为 div 高度必须取决于知道图像高度，这是有道理的。

因为我已经在使用 jquery.waitforimages.js，所以我在页面和脚本的末尾添加了这个：

尽管一切正常，但现在我在 Firebug 中看到了一个错误，该错误仅在我不重新加载时才会发生。所以我假设这个错误发生在图像已经被缓存时：“在初始化之前不能调用砌体上的方法；试图调用方法'reload'”。

有没有办法解决这个问题？谢谢！

我有这个：

当用户第一次访问该站点时，这非常有效。然而，在刷新时，由于缓存而有很多闪烁。我尝试将其移动$('#div').hide();到整个文档中的几个不同位置，但结果是相同的。我也尝试过$(window).load()，$(document).load()但没有帮助。当然，如果我display: none在 CSS 中设置，则不会出现闪烁，但这意味着该站点对于非 JavaScript 用户来说是损坏的。我也尝试过通过 JavaScript 设置 CSS（即$(#div).css({'display':'none'});，但这不起作用。一定有办法！

我在第一个 Rails 应用程序中遇到了 CoffeeScript 问题。我正在使用waitForImages jQuery 插件，它保存在一个名为waitforimages.jquery.js. Rails 自动创建home.js.coffee，我想在其中包含以下 jQuery 片段：

但是我将如何使用 CoffeeScript 符号来编写它呢？

更新

现在一切都很好，所以我想我会发布我的最终代码。问题之一是我没有在home.js.coffee之前waitForImages加载插件。

咖啡脚本：

HTML：

铬 24

我现在正在重写一个网站，它有一些奇怪的功能。有一个页面，用户可以在其中获得选择要打印的图像的选项列表。

用户选中他们想要的图像的复选框，然后单击一个按钮，该按钮向服务器进行回调，并将给定的图像注入所需的 HTML 到隐藏的 DIV 中。

更复杂一点的是，图像 src 属性实际上是指向 .NET MVC 服务器端操作的链接，用于从数据库中检索图像，我们在该数据库中抓取图像，然后在图像上的几个不同位置呈现一些文本。

输出 HTML 最终看起来像这样。

这是 javascript 中的第一步，将 ajax 回调到服务器以填充此 PrintArea DIV。在此之后，我们执行以下操作：

为了适应服务器端加载图像，我们使用 waitForImages jquery 插件，然后使用 jqprint 打印内容。

为了完成这个等式，我们有一个打印样式表（主样式表是 media="screen" 所以它应该是唯一的样式表）。

这在 Firefox 和 IE 中运行良好。

Chrome 无法始终如一地工作。What will happen is that when three images are selected the first two will be displayed but the third which should go on a second page sometimes is displayed and printed, but other times is not. 它似乎是零星的，非常随机的。

有什么建议或想法或如何让 Chrome 在分页符之间始终如一地打印图像？我们内部的想法是 Chrome 的打印预览窗口实际上是在 waitForImages 调用完成之前呈现的，因此内容没有显示，但我还没有想出一个具体的测试方法。

谢谢