Я помітив це на численних "сучасних" веб-сайтах (наприклад, у facebook та пошуку зображень Google), де зображення, розміщені в нижній частині сторінки, завантажуються лише тоді, коли користувач прокручує сторінку настільки, що доставляє їх у видиму область області перегляду ( при джерелі перегляду на сторінці відображається X кількість <img>тегів, але вони не отримуються з сервера відразу ). Як називається ця техніка, як вона працює і скільки браузерів працює. І чи є плагін jQuery, який може досягти такої поведінки з мінімальним кодуванням.

Редагувати

Бонус: хтось може пояснити, чи існує "onScrollIntoView" або подібна подія для елементів HTML. Якщо ні, то як працюють ці плагіни?

Деякі відповіді тут стосуються нескінченної сторінки. Те, що просить Салман, - це ліниве завантаження зображень.

Підключати

Демо

EDIT: Як працюють ці плагіни?

Це спрощене пояснення:

1. Знайдіть розмір вікна та знайдіть розташування всіх зображень та їх розміри
2. Якщо зображення не відповідає розміру вікна, замініть його на заповнювач однакового розміру
3. Коли користувач прокручує вниз і розміщує зображення <прокрутка + висота вікна, зображення завантажується

Минулого року Дейв Артц з AOL виступив із чудовою доповіддю щодо оптимізації на конференції jQuery у Бостоні. AOL використовує інструмент під назвою Sonar для завантаження за запитом на основі положення прокрутки. Перевірте код, щоб дізнатись, як він порівнює scrollTop (та інші) зі зміщенням елемента, щоб виявити, чи видно частину або весь елемент.

jQuery сонар

На цих слайдах Дейв розповідає про Сонар . Ехолот починається на слайді 46, тоді як загальне обговорення "навантаження на вимогу" починається на слайді 33.

Я придумав свій власний базовий метод, який, здається, добре працює (поки що). Є, мабуть, десяток речей, які стосуються деяких популярних сценаріїв, про які я не думав.

Примітка - Це рішення є швидким та простим у впровадженні, але, звичайно, не дуже ефективним. Безумовно , вивчіть новий Intersection Observer, як згадав Apoorv та пояснив developers.google, якщо продуктивність є проблемою.

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Зразок HTML-коду

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Пояснив

Коли сторінка прокручується, кожне зображення на сторінці перевіряється ..

$(this).attr('data-src') - якщо зображення має атрибут data-src

і наскільки ці зображення знаходяться внизу вікна ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

відрегулюйте + 100 до того, що вам подобається (- наприклад, 100)

var source = $(this).data('src');- отримує значення data-src=aka url зображення

$(this).attr('src', source); - вкладає це значення в src=

$(this).removeAttr('data-src'); - видаляє атрибут data-src (щоб ваш браузер не витрачав ресурси, возиться з уже завантаженими зображеннями)

Додавання до існуючого коду

Щоб перетворити ваш html, у редакторі просто знайдіть і замініть src="наsrc="" data-src="

Існує досить хороший нескінченний сувій плагін тут

Я ніколи сам не програмував жодного, але я міг би уявити, що це так працює.

1. Подія прив’язана до прокрутки вікна

   $(window).scroll(myInfinteScrollFunction);

2. Викликана функція перевіряє, чи верх прокрутки перевищує розмір вікна

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Здійснюється запит AJAX із зазначенням, з якого результату # починати, скільки захоплювати та будь-яких інших параметрів, необхідних для отримання даних.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. Ajax повертає деякий вміст (швидше за все у форматі JSON) і передає їх у функцію loadnig.

Сподіваюся, що це має сенс.

Ліниве завантаження зображень шляхом приєднання слухача до подій прокрутки або використання setInterval є дуже неефективним, оскільки кожен виклик getBoundingClientRect () змушує браузер змінити макет всієї сторінки і внесе значний збиток на ваш веб-сайт.

Використовуйте Lozad.js (всього 569 байт без залежностей), який використовує IntersectionObserver для лінивого ефективного завантаження зображень.

Швейцарський армійський ніж із ледачим завантаженням зображень - це ImageLoader від YUI .

Тому що ця проблема полягає не тільки в простому перегляді положення прокрутки.

Це посилання працює для мене демо

1. Завантажте плагін jQuery loadScroll після бібліотеки jQuery, але перед закриваючим тегом тіла.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2.Додайте зображення на свою веб-сторінку, використовуючи атрибут Html5 data-src. Ви також можете вставити заповнювачі, використовуючи звичайний атрибут src img.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Зателефонуйте плагіну на тегах img і вкажіть тривалість ефекту fadeIn, коли ваші зображення з’являться

$('img').loadScroll(500); // in ms

Я використовую jQuery Lazy . На тестування у мене пішло близько 10 хвилин, а на додавання до більшості посилань на зображення на одному з моїх веб-сайтів ( CollegeCarePackages.com ) додалася година чи дві . Я не маю жодного (ніякого / нульового) відношення до розробника будь-якого типу, але це заощадило мені багато часу і в основному допомогло покращити рівень відмов для мобільних користувачів, і я це ціную.