检查 jquery 插件启动前是否加载了图像
例如我有一个 imageslider 插件。
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
....
</div>
$('.images').slider();
如何在插件(任何骨架)中指定仅在加载所有图像时才启动插件?是否像使用 .load() 方法并在每次加载图像时添加到变量一样。然后,一旦达到图像总数,就调用插件吗?但我怎样才能“暂停”插件呢?
谢谢大家,但我确实提到了一个框架 jquery 插件本身,图像加载后我将如何调用该插件?
For e.g I have a imageslider plugin.
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
....
</div>
$('.images').slider();
How can I specify in the plugin(any skeleton) that I want to start the plugin only when all images are loaded? Is it like e.g using a .load() method and adding to a variable everytime an image has loaded. Then once it reaches total number of images, call the plugin? But how can I 'pause' the plugin?
Thanks everyone, but I did mention IN a skeleton jquery plugin itself, how would i call the plugin after the images have loaded?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
$(window).load
将等待所有图像加载到页面上。如果您需要知道该特定 div 中的图像何时完成加载,请参阅此问题中的答案:如何知道特定“div”内的所有图像何时加载?
$(window).load
will wait until all images are loaded on the page.If you need to know when the images have finished loading in that particular div, please see the answers in this question: How to know when all images inside a specific "div" are loaded?
您可以在
window.load
事件 上执行插件,如下所示:这与更常用的
document.ready
事件相反:关键区别在于后者将在 DOM 加载完成时执行,而前者将等到 DOM 引用的所有资源为止DOM 已加载。请注意,如果即使在图像准备好后另一个资源也需要很长时间才能加载,那么它将阻止插件直到加载或超时。
You can execute the plugin on the
window.load
event like so:This is as opposed to the much more commonly used
document.ready
event:The key difference is that the latter will execute when the DOM is finished loading, while the former will wait until all resources referenced by the DOM are loaded. Note that if another resource is taking a long time to load even after the images are ready, then it will hold up the plugin until it loads or times out.
您可以尝试此操作,这将在加载所有图像后初始化插件。
You can try this which will initialize the plugin after all the images are loaded.
要检查该元素中的所有图像有点棘手,但可以完成。
它有点笨重,但应该可以工作。
To check for all the images in just that element is a little tricky, but can be done.
It's a little clunky, but should work.