Проверка загруженные повторные изображения
Я использую функцию холста html5. У меня есть некоторые изображения для привлечения холста, и я должен проверить, что они все загрузились, прежде чем я смогу использовать их.
Я объявил их в массиве, мне нужен способ проверить, загрузились ли они все одновременно, но я не уверен, как сделать это.
Вот мой код:
var color = new Array();
color[0] = new Image();
color[0].src = "green.png";
color[1] = new Image();
color[1].src = "blue.png";
В настоящее время, чтобы проверять, загрузились ли изображения, я должен был бы сделать это один за другим как так:
color[0].onload = function(){
//code here
}
color[1].onload = function(){
//code here
}
Если бы у меня было намного больше изображений, В которых я буду позже в разработке, то Это было бы действительно неэффективным способом проверить их всех.
Как я проверил бы их всех одновременно?
3 ответа
Хакерский способ сделать это - добавить команду JS в другой файл и поместить ее в нижний колонтитул. Таким образом он загружается в последнюю очередь.
Однако использование jQuery (document) .ready также работает лучше, чем собственный window.onload.
Вы используете Chrome, не так ли?
Нельзя ли просто использовать цикл и назначить одну и ту же функцию всем onload'ам?
var myImages = ["green.png", "blue.png"];
(function() {
var imageCount = myImages.length;
var loadedCount = 0, errorCount = 0;
var checkAllLoaded = function() {
if (loadedCount + errorCount == imageCount ) {
// do what you need to do.
}
};
var onload = function() {
loadedCount++;
checkAllLoaded();
}, onerror = function() {
errorCount++;
checkAllLoaded();
};
for (var i = 0; i < imageCount; i++) {
var img = new Image();
img.onload = onload;
img.onerror = onerror;
img.src = myImages[i];
}
})();
Используйте window.onload , который запускается, когда загружены все изображений / frames и внешние ресурсы:
window.onload = function(){
// your code here........
};
Таким образом, вы можете безопасно поместить свой код, связанный с изображением, в window.onload , потому что к тому времени все изображения уже загружены.