Можно ли перезагрузить определенное изображение, если оно не завершило загрузку через заданное время? JavaScript / JQuery

Question

Я запускаю портфолио онлайн-фотографий, и иногда 1 или 2 изображения на странице не загружаются. и обновление покажет не удалось загрузить изображение.

Сценарий: Я нажимаю на ссылку, и изображения начинают загружаться. но страница никогда не завершает загрузку, потому что не удается загрузить одно из изображений. После обновления браузер загружает сбойное изображение как хорошее изображение. Только Ctrl + F5 может очистить кэшированное изображение с ошибкой.

Планируемое решение: Я хочу обнаружить изображения, которые не закончили загрузку после 10 секунд, и перезагрузить их динамически, используя javascript / jquery.

Я нашел способ заставить браузер перезагрузить изображение, добавив фиктивную уникальную строку запроса за src = "image.jpg? Id = dummyNo". Но я понятия не имею, как определить, какое изображение не завершило загрузку, чтобы я мог перезагрузить их.

Возможно ли это сделать?

Что ж, о sidenote, я хотел бы узнать о сжатии веб-сайтов и оптимизации изображений (времени загрузки), где мне лучше почитать?

Answer 1

@ Pointy и @Gaby правы в своих комментариях. Тем не менее мне было любопытно, как этого добиться.

Это то, что я придумал, для чего это стоит. Не проверено, однако.

var images = $('img');  // Get all images. (you'll want to modify the selector
                        //    to work with only the desired images)

images.load(function() {       // Add a load event hander that removes 
    images = images.not(this); //    each image from images once loaded.
});

setTimeout(function(){        // After 10 seconds, iterate over each remaining
    images.each(function() {  //     image, reloading each one
        // reload this image
    });
},10000);  // run after 10 seconds

Answer 2

Введите код ниже в конце страницы:

$('img').error(function(){
  var src= $(this).attr('src');
  if (window.console) {
       console.log('reload image '+ src);
  }
  var i= src.indexOf("&random=");
  if(i > -1) {
     src= src.substring(0,i);
  }
  i = src.indexOf("?random=");
  if(i > -1) {
     src= src.substring(0,i);
  }
  if(src.indexOf('?') > -1 ) {
      src= src+"&random="+ (new Date().getTime());
  } else  {
      src= src+"?random="+ (new Date().getTime());
  }
  $(this).attr('src', src);  
});