Как я могу заблокировать загрузку изображений с помощью JQuery

Question

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

Как ленивые нагрузки, но изображений будут при прокрутке не нагрузки.

Как я могу сделать это с помощью jquery? Есть ли какая-нибудь функция для этого?

Answer 1

$('img').attr('src', 'img_with_square_border.jpg'); 

Это должно работать отлично.

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

EDIT TO ВМЕСТИТЬ НАЖИМАЯ

$('img').each(function() { this.setAttribute('real-src', this.src); }) 
     .attr('src', 'whatever.jpg') 
     .click(function() { this.src = this.getAttribute('real-src'); }); 

Answer 2

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

Пример ::http://jsfiddle.net/GTQTC/2/(вернется через 3 секунды)

$('img').each(function() { 
    var $th = $(this); 
    var div = $('<div>', { 
     className: 'replacement', 
     width: $th.width(), 
     height: $th.height(), 
     display: $th.css('display'), 
     css:{'backgroundColor':'#DDD'} 
    }) 
     .data('originalImage',this); 
    $th.replaceWith(div); 
}); 

setTimeout(function() { 
    $('.replacement').replaceWith(function() { 
     return $(this).data('originalImage'); 
    }); 
}, 3000);