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

Question

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

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

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

Answer 1

Вот пример, который заменяет изображения серым полем и сохраняет ссылку на исходное изображение, используя .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);

Answer 2

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

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

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

РЕДАКТИРОВАТЬ ВЩЕЛЧОК ПРОЖИВАНИЯ

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