javascript 如何等待图像在 jquery 中加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15605522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wait until image is loaded in jquery
提问by AMD
I have this example, when my form is submitted I have to load an image file and wait until the image has loaded to return true(in this case to submit the form)
我有这个例子，当我提交表单时，我必须加载一个图像文件并等待图像加载到return true（在这种情况下提交表单）
e.g.
例如
$('#myform').submit(function(){
var image=document.createElement('image')
var src=document.createAttribute('src')
image.value="http://example.com/image.jpg"
image.setAttributeNode(src);
document.body.appendChild(image);
})
Here if I return truethe form will be submitted (the image won't load) and if falseit won't (the image will load but the form will not be submitted). How can I make a code that will return true after the image has loaded.
在这里，如果我return true将提交表单（图像不会加载），如果false不会（图像将加载但不会提交表单）。如何制作在图像加载后返回 true 的代码。
采纳答案by Admiral Potato
There is an important concept one must note here - When you add an Event Handler function to be executed when a particular event is fired, the value that the Event Handler function returns actually goes nowhere, and is passed to nothing. Event Listeners are created to invoke Event Handler functions at an unknown point in the future, but typical script execution is completely linear and happens in the order of the commands in the script - so it is best to define the functionality of your application in a way that you perform certain actions like this only when certain events take place.
这里有一个重要的概念必须要注意——当你添加一个Event Handler函数在特定事件被触发时执行，Event Handler函数return的值实际上是无处可去，被传递给空。创建事件侦听器是为了在未来未知的时间点调用事件处理程序函数，但典型的脚本执行是完全线性的，并按照脚本中命令的顺序发生 - 因此最好以某种方式定义应用程序的功能仅在发生特定事件时才执行此类特定操作。
It looks like in your question above, you are defining one event handler to listen for when the form is submitted initially, so I will take that as the initial event which gets everything started. Here is how I would handle the submission process you describe:
看起来在你上面的问题中，你正在定义一个事件处理程序来监听表单最初提交的时间，所以我将把它作为让一切开始的初始事件。以下是我将如何处理您描述的提交过程：
//wrap the form element in jQuery and cache it so we don't work to re-select it
var $myform = $('#myform');
//specify that we are listening for -when- the form is submit
$myform.on('submit', function(event){
//prevents the form from actually submitting when submit is first clicked
event.preventDefault();
//Simpler image construction
var image = new Image();
document.body.appendChild(image);
//remember to listen for the image's load event before assigning a source
$(image).on('load', function(){
//this function is invoked in the future,
//when the image load event has been fired
//this bit actually submits the form via GET or POST
$myform.submit();
});
//an image's `src` attribute can be set directly via the`src` property
image.src = "http://placekitten.com/320/240";
});
Example of this working on JSFiddle:
在 JSFiddle 上工作的例子：
http://jsfiddle.net/Admiral/uweLe/
http://jsfiddle.net/Admiral/uweLe/
I would recommend reading up on jQuery's .on()method to gain some insight on the currently preferred methods of event binding - that should clear things up a bit.
我建议阅读 jQuery 的.on()方法，以深入了解当前首选的事件绑定方法 - 这应该会使事情变得更清楚一些。
Good luck!
祝你好运！
回答by Coin_op
You could use an onloador jquery loadevent on the image and submit the form on the callback. Then if you want to wait longer still you could also add a timeout in the callback.
您可以在图像上使用onload或jquery load事件并在回调中提交表单。然后，如果您还想等待更长时间，您还可以在回调中添加超时。
Something like:
就像是：
$('#myform .submitButton').click(function(e){
e.preventDefault();
var image=document.createElement('image');
$(image).load(function(){
//Submits form immediately after image loaded.
$('#myForm').submit();
// Submits form 1 second after image has loaded
setTimeout(function(){ $('#myForm').submit(); }, 1000);
});
var src=document.createAttribute('src');
image.value="http://example.com/image.jpg";
image.setAttributeNode(src);
document.body.appendChild(image);
})
Note: In my example I've changed the submitevent to a clickevent. You could still use the submit if you want, it would probably still work, as long as you returned falseor used preventDefault.
注意：在我的示例中，我已将submit事件更改为click事件。如果您愿意，您仍然可以使用提交，它可能仍然有效，只要您返回false或使用preventDefault.
回答by Yevgeniy Afanasyev
I use imagesLoaded PACKAGED v3.1.8
我使用 imagesLoaded PACKAGED v3.1.8
You can find it on github: https://github.com/desandro/imagesloaded
你可以在 github 上找到它：https: //github.com/desandro/imagesloaded
Their official site: http://imagesloaded.desandro.com/
他们的官方网站：http: //imagesloaded.desandro.com/
