Проверьте, завершены ли динамически загруженные изображения
У меня есть код, который публикует скрипт php, который читает все файлы в папке и возвращает их, все они являются изображениями, jquery анализирует информацию, в переменной, которая представляет собой массив, каждое изображение сохраняется как изображение. Объект с src, width, height и attr, при успешном завершении. Я хочу проверить, загружено ли каждое изображение, а затем, наконец, при полном запуске другой функции и удалить div. Но я не знаю, как проверить, полностью ли загружено изображение, я дурачился с .complete, но загрузка никогда не кажется, функция вызывает его до тех пор, пока img не будет загружена, а затем вернет true, так что может продолжать идти. здесь код, он немного грязный и, вероятно, не очень хороший код.
var gAllImages = [];
function checkFed()
{
var leni = gAllImages.length;
for (var i = 0; i < leni; i++) {
if (!gAllImages[i].complete) {
var percentage = i * 100.0 / (leni);
percentage = percentage.toFixed(0).toString() + ' %';
console.log(percentage);
// userMessagesController.setMessage("loading... " + percentage);
checkFed();
return;
}
//userMessagesController.setMessage(globals.defaultTitle);
}
}
if($('slideshow')){
var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>';
$('#overall').append(topdiv);
//console.log('alerta');
var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){
var d = $.parseJSON(data);
//console.log(d[1]);
if(typeof(d) == 'object' && JSON.parse){
var len = d.length;
//console.log(len);
for(var i = 0; i < len; i++){
var theImage = new Image();
var element = d[i].split('"');
// console.log(element);
// console.log(element[4]);
theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
theImage.width = element[2];
theImage.height = element[4];
theImage.atrr = element[6];
gAllImages.push(theImage);
}
// console.log(html);
}else{
console.log('error');
}
}).success(function (){
setTimeout('checkFed', 150);
}).error(function(){
var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>';
$('#loading').append(err);
}).complete(
function(){
var len = gAllImages.length;
var html = '<ul class="slides">'
for(var i = 0; i < len; i++){
html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>';
}
html += '</ul>';
$('#slideshow').append(html);
}
);
jqxhr.complete(function(){
//
imageSlide();
$('#loading').remove();
//
console.log('completed');
});
}
Если я возьму рекурсивность checkFed (), очевидно, что скрипт завершится, и когда изображения помещаются в html, они загружаются нормально и быстро, в кеше никогда не загружается? любые другие предложения в других частях кода также приветствуются.