如何等待加载了 javascript 的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27165948/
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 for images loaded with javascript?
提问by фяфяф
I have a div in which I am appending imgs. Images are loading with AJAX by 20 items. They are showing with jQuery animation. A problem that animation is retarding. I think that there are 2 problems:
我有一个 div，我在其中附加了 imgs。使用 AJAX 加载 20 个项目的图像。他们用 jQuery 动画显示。动画延迟的问题。我认为有两个问题：
- Images for showing are not downloaded and i want to display them now
- When I set css display: block to img, I get delay when browser painting image
- 未下载用于显示的图像，我想现在显示它们
- 当我将 css display: block 设置为 img 时，浏览器绘制图像时出现延迟
So the question is how to wait for pack of images (20 items) is downloaded and how to dispose of the painting delay?
那么问题来了，如何等待一包图片（20张）下载完成，以及如何处理绘画延迟？
P/S. If I show empty divs (just set them background-color) or 1 image for all img-tags the animation works quickly.
P/S。如果我为所有 img-tags 显示空的 div（只需将它们设置为背景颜色）或 1 张图像，动画就会快速运行。
回答by Joy
You can use this snippet. It doesn't depend on any library and is working well for our projects.
您可以使用此代码段。它不依赖于任何库，并且在我们的项目中运行良好。
/*
* Preload an image if not cached, then call a callback function
* @param {String} the image url
* @param {Function} the callback function
*/
function loadImg(url, fn) {
var img = new Image();
img.src = url;
if (img.complete) { // If the image has been cached, just call the callback
if (fn) fn.call(img, true);
} else {
img.onerror = function() { // If fail to load the image
if (fn) fn.call(img, false);
};
img.onload = function() { // If loaded successfully
if (fn) fn.call(img, true);
//On IE6, multiple frames in a image will fire the 'onload' event for multiple times. So set to null
img.onload = null;
};
};
}
For your scenario, you can pass in a callback function like:
对于您的场景，您可以传入一个回调函数，例如：
var callback = function(loaded) {
if (loaded === true) {
// do the animation.
var img = this; // now `this` points to the image itself.
} else {
// show default image or 'image failed to load'.
}
}
回答by alex
You can use my jQuery pluginto wait for the images to download in your new element.
您可以使用我的jQuery 插件来等待图像下载到您的新元素中。
$('#container').waitForImages().done(function() {
$(this).addClass('ready');
});
回答by jfriend00
You can either preload the images ahead of time (so they are all ready in the cache and won't have any delay when loading) or you can load them when needed and use a notification when they are loaded before starting the animation. Either way, you need to make sure the images are loaded before starting the animation if you want a smooth running animation.
您可以提前预加载图像（因此它们都在缓存中准备就绪，加载时不会有任何延迟），或者您可以在需要时加载它们并在开始动画之前加载它们时使用通知。无论哪种方式，如果您想要流畅运行的动画，您需要确保在开始动画之前加载图像。
You can see these other references for how to preload images with code samples. The first reference supports a callback that will get called when all the images have been loaded:
您可以查看这些其他参考资料，了解如何使用代码示例预加载图像。第一个引用支持一个回调，当所有的图像都被加载时会被调用：
Image preloader javascript that supports events
Is there a way to load images to user's cache asynchronously?
回答by WisdmLabs
Use .completeof javascript
.completejavascript的使用
<img src="http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg" id="something" />
var myVar = setInterval(function(){
console.log("loading")
if( document.getElementById("something").complete ) { // checks if image is loaded
console.log( "loaded" );
clearInterval(myVar);
}
}, 500);
hereis jsfiddle demo.
这是 jsfiddle 演示。
