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?
2
-
1Does it really depend on loading? Or do you want to "not display" them? The loading of new images is done with AJAX if you are on a certain position. So it is not "not loading", but "do load" at the right moment I think.Marnix– Marnix2011-01-29 00:57:47 +00:00Commented Jan 29, 2011 at 0:57
-
@Marnix, images must be blocked while page is loading. So, i can increase my webpages speed (for example) .Eray– Eray2011-01-29 01:28:15 +00:00Commented Jan 29, 2011 at 1:28
Add a comment
|
2 Answers
$('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'); });
2 Comments
Eray
but all images have different sizes . And later , how can i find these images real address for load images.
sdleihssirhc
@Eray If the
img_with_square_border is just a solid color, then distorting it to all different sizes should be okay, right? Under what circumstances will you be loading the images back - when the user scrolls to them, when certain elements are clicked, etc.?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);
Comments
