Можно ли с помощью JS заблокировать загрузку изображений, которые статически определены в HTML?

Question

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

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

Итак, если все уже статически, то есть: т.е. 1005

<img src="images/photo.jpg" alt="Photo" />

Возможно ли и всегда успешно сделать что-то вроде:

$(document).ready(function(){
  $("img").each(function(){
        $(this).attr("data-src", $(this).attr('src'));
        $(this).attr("src", ''); 
  })
})

IIRC, просто скрывая все элементы img с помощью css, установив display в none, не остановит их загрузку в фоновом режиме. И я не был уверен, что обратный вызов document.ready будет выполнен до того, как будет обработан какой-либо из активов.

Или я должен просто сказать, привинтить JS-отключенные клиенты и загрузить ресурсы, используя ajax и json?

Answer 1

document.ready после того, как все находится в DOM. Изображения загружаются раньше, если я знаю.

Почему ты не можешь сделать это так?

<img data-src="yourimage.png" class="img_i_need" />

и, если вам это нужно, используйте

$(function() {
    $("div").click(function() {
        $(".img_i_need").each(function() {
            $(this).attr('src', $(this).attr('data-src'));
        });
    });
});

http://jsfiddle.net/genesis/nDq82/3/

Answer 2

Никогда не привинчивайте JS-отключенные клиенты, по любой причине.

Тем не менее, ваша идея - это то, о чем я тоже думал, читая ваш вопрос.Не знаю, если это работает, хотя.