I use a lot of images in my pages, so i use Lazyload.
I create the following tags and it works fine,
//
<img class="lazy" data-original="http://i4.sdlcdn.com/img/storefront/06/pumaBrandStore_017June2014_01.jpg" alt="Shop Puma Mens Footwear" width="474" height="400" title="Shop Puma Mens Footwear" />
<noscript><img src="http://i4.sdlcdn.com/img/storefront/06/pumaBrandStore_017June2014_01.jpg" alt="Shop Puma Mens Footwear" width="474" height="400" title="Shop Puma Mens Footwear" /></noscript>
//
Also <noscript></noscript> has to be used for fallback.
But adding and modifying the image tags for a lot of images is a time taking process, so I came up with this script.
For a normal img tag,
<img src="http://i4.sdlcdn.com/img/storefront/06/pumaBrandStore_017June2014_01.jpg" alt="Shop Puma Mens Footwear" width="474" height="400" title="Shop Puma Mens Footwear" />
<script>
(function(){
$(document).ready(function() {
$('img').each(function() {
var imgSrc = $(this).attr('src');
var imgH = $(this).attr('height');
var imgW = $(this).attr('width');
var imgAlt = $(this).attr('alt');
var imgTitle = $(this).attr('title');
var mainReplace = $('<img/>').attr({
'class':'lazy',
'data-original':imgSrc,
'height':imgH,
'width':imgW,
'alt':imgAlt
});
$(this).replaceWith(mainReplace);
});
});
})(jQuery);
</script>
This runs along with the run lazyload script
<script>(function(a){a(document).ready(function(){a("img.lazy").lazyload({effect:"fadeIn",failure_limit:5});a("img.lazy").show().lazyload()})})(jQuery);</script>
Test to see if lazy load is working:
I usually follow a simple test to see if image is lazy loaded by saving [ctrl + S] the web page and if lazy load works only the "loaded" images are saved.
Is this method correct?
I tried this test and my images are lazy loaded.Only the "loaded" images are saved.
Can i use this method to lazy load my images?