визуализировать только содержимое на странице, которая в данный момент видна

Question

У меня есть веб-страница, которая отображает список отзывов вместе с тегом <img> рядом с каждой записью.

Это выглядит следующим образом:

<table> 
<tr> 
    <th> 
    Name 
    </th> 
    <th> 
    Testimonial 
    </th> 
    <th> 
    Subject 
    </th> 
</tr> 

<tr> 
    <td> 
    Joe Blow 
    </td> 
    <td> 
    I had a great stay... 
    </td> 
    <td> 
    <img src="..." /> 
    </td> 
</tr> 
... 
</table> 

В основном это может обслуживать до 100 записей сразу, и он замерзает браузер очень часто - особенно потому, что я, вероятно, не полностью оптимизированы все размеры imgae файлов и некоторые из них более 1 МБ.

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

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

У кого-нибудь есть идеи?

Answer 1

То, что вы пытаетесь выполнить, называется Lazy Loading, и я считаю, что в Интернете есть несколько инструментов или js-библиотек.

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

Но это зависит от вас.

Надеюсь, это поможет.

Ссылки:

Lazy Loading css-tricks.com

jQuery Unveil

jQuery Lazy Load

Answer 2

Вы можете связать события с тегами img, которые запускаются, когда они отображаются в окне просмотра. Вы можете использовать это решение для этого: jquery trigger function when element is in viewport

Итак, когда событие запускается, вам просто нужно использовать .setAttribute, чтобы установить атрибут src тега img.