Customise LazyLoad along with fallback for easy implementation. Effective & Func

[jack_Quarry]

I use a lot of images in my pages, so i use Lazyload.
I create the following tags and it works fine,
//

<noscript></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,

<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 = $(‘‘).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.
*If the user has javaScript disabled, the image tag remains intact, otherwise it is replaced.

Is this method correct?
Can i use this method to lazy load my images?

[Author]

Posts