CODEWITHSUNDEEP
javascriptjqueryimageblocking
Eray
Eray

Reputation: 7128

How can i block loading of images with Jquery

I want to block all images on a webpage. There will be grey boxes instead of images.

Like lazy load , but images will not load while scrolling.

How can i do this with jquery ? Are there any function for this?

Upvotes: 2

Views: 2541

Answers (2)

sdleihssirhc
sdleihssirhc

Reputation: 42496

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

This should work perfectly.

...Unless, of course, you wanted to load the images back when the user gets to them.

EDIT TO ACCOMMODATE CLICKING

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

Upvotes: 1

user113716
user113716

Reputation: 322532

Here's an example that replaces images with a gray box, and retains a reference to the original image using .data().

Example:: http://jsfiddle.net/GTQTC/2/ (will revert back after 3 seconds)

$('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);

Upvotes: 1

Related Questions