- This topic is empty.
Viewing 1 post (of 1 total)
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Customise LazyLoad along with fallback for easy implementation. Effective & Func
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?