Как определить, когда изображение сделано рендерингом после изменения его источника

Question

Я работаю над приложением Phonegap, в котором я пытаюсь отобразить пользователю различное количество изображений. Мой графический интерфейс соответствует принципам, изложенным в статье this.

Я знаю, сколько изображений я получу до того, как я сделаю свой запрос ajax GET, поэтому я добавляю правильное количество изображений, отображающих gif загрузки, в соответствующий div, используя метод добавления jQuery. Затем я начинаю свой запрос ajax.

В моем успехе обратного вызова У меня есть следующий метод

imageblock.forEach(function(entry) 
{ 
    changeImage(i, entry, i*1000); 
    i++;        
}); 

функция changeImage() выглядит следующим образом:

function changeImage(index, src, timeout) 
{ 
    setTimeout(function() 
    { 
     $("#image"+index).attr("src", 'data:image/png;base64,'+src); 
    },timeout); 
}//changeImage 

Без использования SetTimeout() Я наблюдал приложение к зависанию времени он отображает изображения. Таким образом, это работает отлично, поскольку, по-видимому, браузеру достаточно времени, чтобы сделать изображение.

Мне было интересно, есть ли лучший способ, чем ждать фиксированного интервала времени для загрузки следующего изображения. Я посмотрел на onLoad(), но, похоже, это срабатывает, когда я изначально создаю тег изображения, в котором отображается загрузочный gif. Есть ли способ сказать, когда изображение будет выполнено?

Answer 1

Вы можете использовать класс «Изображение» в Javascript. Вы делаете это, создавая новый экземпляр класса Image и добавляя событие onload (которое отправляется, когда изображение загружается правильно).

Пример кода:

function changeImage(index, src, timeout) 
{ 
    setTimeout(function() 
    { 
     $("#image"+index).attr("src", 'data:image/png;base64,'+src); 

     var img = new Image(); 

     img.src = 'data:image/png;base64,'+src; 
     img.onload = function() { 
      alert("Image loaded!"); 
     }; 
    }, timeout); 
}//changeImage 

Answer 2

Недавно я исследовал на эту тему и нашел несколько решений, было это on SO или блог посты. Я в конечном итоге пытался the solution from Paul Irish, который, казалось, был конечным рабочим решением. Unfortuntely, я никогда не получил его, чтобы правильно работать во всех браузерах, так что я просто оставил эту идею в сторону и будет периодически проверять, если что-то существует, что работает во всех случаях ...

Answer 3

Вы можете использовать imagesloaded (https://github.com/desandro/imagesloaded)

Используя imagesLoaded, вы можете установить обработчик события, чтобы знать, когда загружается изображение.

var imgLoad = imagesLoaded("images_selector"); 
function onAlways(instance) { 
    console.log('all images are loaded'); 
} 
imgLoad.on('always', onAlways); 

Answer 4

Вот что я в конечном итоге делает:

Вместо создания шаблонного загрузки изображения для каждого изображения я ожидал, создать единый загрузочный образ, а затем выполнить мой АЯКС GET. В моем обратном вызове я сохраняю каждое изображение в массиве (в моем случае «изображения» кодируются base64). Как только я их всех в массиве, я вручную вызываю метод loadNextImage (i), который создаст новое изображение с свойством onLoad onLoad = "loadNextImage (i ++)". Кажется, что это имеет желаемый эффект загрузки каждого изображения последовательно и не замедляется слишком плохо.

Для всех, кто заинтересован вот мой новый успех обратного вызова:

imageblock.forEach(function(entry) 
{ 
    images[i] = entry; 
    i++; 
    currentimagesdisplayed = i; 
}); 
loadNextImage(0); 

и здесь функция loadNextImage():

function loadNextImage(i) 
{ 
    var id = 'image'+i; 
    var src = 'data:image/png;base64,'+images[i]; 
    i++; 
    var onload = 'loadNextImage(' + i + ')'; 
    if(!(i>images.length)) 
    { 
     $('#TownClerkPortalResultsImages').prepend('<img height="50%" width="100%" id ="' + id + '" src ="' + src + '" onLoad="' + onload + '" />'); 
    }//if 
    else 
    { 
     $("#recordsloader").hide(); 
    }//else 

я возиться с некоторыми CSS, чтобы увидеть, если я могу» t заставляйте его выглядеть причудливым и заставить их исчезать или что-то в этом роде. Если это все еще неудовлетворительно, я рассмотрю другие ответы.