hasAttribute -VS- getAttribute

#javascript #оптимизация #img #attribute #properties

Тут есть решённая задача - http://plnkr.co/edit/FaKoF0M4QQB1OSdtpClb?p=preview

Суть в том, чтобы сделать предзагрузку картинок по мере прокрутки страницы.

Функцию showVisible - сделал слегка по-своему:

function showVisible() {
  var imgs = document.getElementsByTagName("img");

  for (var i = 0; i < imgs.length; i++) {


    if (isVisible(imgs[i]) && imgs[i].hasAttribute("realsrc")) {   // <--
      imgs[i].src = imgs[i].getAttribute("realsrc");
      imgs[i].setAttribute("realsrc", "");
    }

  }
}


Проблема возникает в проверке:

 if (isVisible(imgs[i]) && imgs[i].hasAttribute("realsrc"))


а именно в методе hasAttribute -
из-за него крашатся все картинки оказавшиеся в поле видимости.
Проблему решает замена hasAttribute на getAttribute. Так и хочется сказать ё**ный
кот, да как так то? Кто-то может объяснить почему возникает подобная дичь?
    

Ответы

Ответ 1

Метод hasAttribute в вашем случае вернет всегда значение true, вне зависимости от
того, что у вас в аттрибуте, ведь согласно коду, аттрибут есть всегда, а вот значение
не всегда у него есть.

А метод getAttribute в одном случае вернет вам адрес ссылки, а в другом случае вернет
пустое значение. Что в нашем случае означает:

var tmp = imgs[i].getAttribute("realsrc"); // вернуло 'https://js.cx/lazyimg/3-2.jpg'


Значит при проверке !tmp - это false.

В противоположном случае у нас будет пустое значение, не undefined а просто ничего.
Аттрибут есть, а значения нет.

var tmp = imgs[i].getAttribute("realsrc"); // вернуло '' - ничего нет


Значит при проверке !tmp - это true.

Поэтому вот так и получается, что условие всегда true - отсюда и беда.