swapping src to lazy

Question

Недовольны существующими ленивыми плагинами загрузки (они настолько сложны, что я даже не могу понять коды в них), я думал, что могу создать простой, понятный сценарий, который ленивы загружает изображения.

Моя идея была простой. Начните со следующего (деформированного) тега img.

<img lazy="http://lorempixel.com/400/200"/> 

Использование JavaScript, замените слово «ленивый» с «ЦСИ», когда страница прокручивается быть вверх или вниз.

function hackyaFunction_lazy() { 
    [].forEach.call(document.querySelectorAll('img[lazy]'), function(img) { 
    img.setAttribute('src', img.getAttribute('lazy')); 

    img.onload = function() { 

     var imgs = document.querySelectorAll('[lazy]'); 
     for (i = 0; i < imgs.length; i++) { 
     var o = imgs[i], 
      lazy = o.getAttribute('lazy'); 
     if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
      o.setAttribute('src', lazy); 
      o.removeAttribute('lazy'); 
     } 
     } 
    } 
    window.onload = window.onscroll = hackyaFunction_lazy; 

    }); 
} 

Я знаю достаточно JavaScript, чтобы взломать вместе биты & части, чтобы сделать то, что работает. И приведенный выше код работает.

На моей консоли я вижу, что слово «ленивое» было успешно заменено на «src» для изображений, которые находятся в видовом экране.

Однако изображения, которые находятся за пределами области просмотра, это то, что я вижу.

<img lazy="http://lorempixel.com/400/200/sports/Dummy-Text" src="http://lorempixel.com/400/200/sports/Dummy-Text"> 

Так что я половину рабочего кода & это лучшее, что я могу сделать.

Я должен был использовать только один из доступных там плагинов; просто хотел посмотреть, смогу ли я создать что-то простое & легко.

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

Любая помощь будет принята с благодарностью.

Я хотел собрать все это (html & js) на jsfiddle, но изображения не отображаются на jsfiddle. Не знаю, почему.

Код работает (как описано) в локальной среде.

Answer 1

Первая строка в .forEach() изменяет src текущего изображения, не снимая lazy и без проверки, является ли это в виду или нет, поэтому после .forEach() побежал эту линию для каждого изображения они будут все были обновлены , Вот почему, когда вы проверяете элементы с помощью инструментов dev, многие из изображений имеют как атрибуты , так и lazy.

Если идея состоит в том, чтобы только установить src только изображение прокручивается в поле зрения, а также для любых изображений, которые уже в силе при загрузке страницы, вы можете сделать это, сохраняя только внутреннюю for петли вашей функции:

function hackyaFunction_lazy() { 
    var imgs = document.querySelectorAll('[lazy]'); 
    for (i = 0; i < imgs.length; i++) { 
    var o = imgs[i]; 
    if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
     o.src = o.getAttribute('lazy'); 
     o.removeAttribute('lazy'); 
    } 
    } 
} 

window.onload = window.onscroll = hackyaFunction_lazy; 

Это работает, потому что на каждом прокручивается сначала выбирает любые элементы все еще имеют атрибут lazy, то для этих элементов он проверяет, являются ли они в поле зрения и, если так устанавливает их src и удаляет lazy. Элементы, которые еще не были просмотрены, не обновляются.

Смотреть это работает здесь: https://jsfiddle.net/vb779g7v/2/

Редактировать/P. С.Обратите внимание, что ваш тест if, если элемент находится в поле зрения, неверен, поскольку screen.height дает, как следует из названия, высоту всего экрана , а не высоту клиентской области в браузере. Но это не очень важно для вашего вопроса, поэтому я оставлю это исправление в качестве упражнения для читателя ...