javascript img onload()

Question

Я использую функцию onload <img>, чтобы вызвать действие изменения размера на загруженном изображении. Но я обнаружил, что на одной веб-странице есть два или более <img> s с тем же «src», что означает, что изображение такое же, последняя функция onload() <img> не будет вызываться. Как убедиться, что все <img> s правильно изменены, даже если есть <img> s с тем же src?

Спасибо.

Answer 1

Это происходит потому, что ваш браузер фактически кэширует первое изображение. Поэтому, когда вы снова пытаетесь загрузить один и тот же «src», он локально кэшируется и никогда не запускает загрузку. Чтобы он всегда загружался, вы могли добавить к строке запроса уникальное значение.

Answer 2

Вместо того чтобы использовать отдельный onload обработчик для каждого <img/>, почему бы не просто использовать один onload событие для window? Это событие срабатывает после . Все загружено (как и все изображения), поэтому вы можете обрабатывать каждое изображение только в одном обработчике. Что-то вроде:

function processAllImages() 
{ 
    var imgElts = document.getElementsByTagName('img'); 
    for (var i=0; i<imgElts.length; i++) 
    { 
     processImage(imgElts[i]); // TODO write this function 
    } 
} 

window.onload = processAllImages; 

Answer 3

Я задал аналогичный вопрос раньше.
Проверьте: Javascript/jQuery: How to detect img is fully downloaded or not?

Одним словом, вы можете использовать свойство «complete» в теге img.
проверьте его, прежде чем связывать событие загрузки.