Событие усечения изображения уловов

Question

Есть ли способ поймать изображение коррумпированной или усеченной ошибки и обработать ее с помощью javascript?

У меня есть несколько gifs, которые я пытаюсь показать на своем веб-сайте с зависанием для анимации. Сначала я попытался просто анимировать атрибут src при наведении, но это дало мне ошибки обрезания изображения и вызвало бы случайное разбиение gif.

Чтобы попытаться обойти это, я создаю новый элемент img и добавляю его в dom, но это приводит к раздражающему «мерцанию», когда изображения меняются. Код:

var gifs = document.getElementsByClassName("gif"); 

for(var i=0;i<gifs.length;i++){ 
     gifs[i].addEventListener('mouseenter', switchOn, false); 
    } 

var switchOn = function() { 
    var oImg=document.createElement("img"); 
    var parent = this.parentElement; 
    oImg.setAttribute('src', this.dataset.alt); 
    oImg.setAttribute('data-alt', this.src); 

    this.parentNode.removeChild(this); 
    parent.appendChild(oImg); 
    oImg.addEventListener('mouseleave', switchOff, false); 
}; 

var switchOff = function() { 
    var oImg=document.createElement("img"); 
    var parent = this.parentElement; 
    oImg.setAttribute('src', this.dataset.alt); 
    oImg.setAttribute('data-alt', this.src); 

    this.parentNode.removeChild(this); 
    parent.appendChild(oImg); 
    oImg.addEventListener('mouseenter', switchOn, false); 
}; 

Answer 1

Общий метод на плавное переключение изображений/GIF/видео является на самом деле, что все элементы активов в DOM, но скрыть их с помощью CSS. Затем при переключении вы просто скрываете и показываете с помощью CSS на основе ваших желаемых событий. Таким образом, в этом примере у вас на самом деле есть два элемента DOM поверх друг друга. Один из них - изображение по умолчанию, а другое - альтернативное изображение. Когда происходит щелчок, вы скрываете изображение по умолчанию и показываете альтернативное изображение.

Проблема с вашим мерцанием в основном связана с тем фактом, что вы устанавливаете источник, который на пропуске в кеше фактически должен будет загрузить изображение/gif/video, прежде чем он что-нибудь покажет.

Эта стратегия также устранит вашу проблему при разрыве gif. Однако gifs вполне может оказаться в цикле после того, как вы их впервые покажете. Вот почему видеотекты html5 - лучшие варианты для такого рода функций, потому что вы полностью контролируете поиск.