<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=ca4be5fa-f5b9-4534-9038-995065b75dd1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=ca4be5fa-f5b9-4534-9038-995065b75dd1' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

defer image lazyload with animation effect | Speed up page load by deferring images

Anupam September 17, 2021 - 1 min read

Defer Offscreen Images

How To Install Jquery Lazy Load For BlogSpot Blogs? How To Optimize Blogger Blog For Faster Loading? How To 2x Your Blogger Blog Loading Speed? Do You want LazyLoad Plugin on your blog to increase your page speed metrics? I will show you the way to speedup a Blogger Blog by using the Lazy Load Script.

With images being among the most popular type of content on the web, page load time on websites can easily become an issue.

What Is Lazy Loading?

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Defer Offscreen Images

Delay loading images that appear below-the-fold for faster rendering of above-the-fold page content.

What it means?

Deferring off screen images means delaying loading of images that appear below-the-fold on the page. This ensures that above-the-fold content on the page renders faster. This how-to details how we can defer off-screen images in various situations:

Download script and Watch Tutorial

Download code Watch now

If you have any doubts regarding this post, Please ask it via comments, and Do not forget to share this post with your friends!!

contact us:

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/745881458-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7WW71yaDO0ODa6fHGv4fT1tI-8CQ:1735230898165';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2021/09/defer-image-lazyload-with-animation.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2021/09/defer-image-lazyload-with-animation.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2021/09/defer-image-lazyload-with-animation.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/57576220203161290/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/361ce9cf7a112c52', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '57576220203161290', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bLeQ0JtZT4sQAwHVr2vcV0Sh1cXSRJ3kFZ4o4oc6rqZPf2AScdBrYxIeSluGwgnqwIMLDDq_uVE4UAUpoqrAdBDQqw9gGiEjyCihCAGy-djxjvcBu-wtGjoCbSxObMJNFbgM2RhobSk/s72-w640-c-h360/20210917_115334_0000.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bLeQ0JtZT4sQAwHVr2vcV0Sh1cXSRJ3kFZ4o4oc6rqZPf2AScdBrYxIeSluGwgnqwIMLDDq_uVE4UAUpoqrAdBDQqw9gGiEjyCihCAGy-djxjvcBu-wtGjoCbSxObMJNFbgM2RhobSk/w640-h360/20210917_115334_0000.png', 'pageName': 'defer image lazyload with animation effect | Speed up page load by deferring images', 'pageTitle': 'ANUTRICKZ: defer image lazyload with animation effect | Speed up page load by deferring images', 'metaDescription': 'Speed up page load by deferring images,Defer Offscreen Images,How To Install Jquery Lazy Load For BlogSpot Blogs? How To Optimize Blogger Blog For Fas'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'defer image lazyload with animation effect | Speed up page load by deferring images', 'description': 'Speed up page load by deferring images,Defer Offscreen Images,How To Install Jquery Lazy Load For BlogSpot Blogs? How To Optimize Blogger Blog For Fas', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bLeQ0JtZT4sQAwHVr2vcV0Sh1cXSRJ3kFZ4o4oc6rqZPf2AScdBrYxIeSluGwgnqwIMLDDq_uVE4UAUpoqrAdBDQqw9gGiEjyCihCAGy-djxjvcBu-wtGjoCbSxObMJNFbgM2RhobSk/w640-h360/20210917_115334_0000.png', 'url': 'https://anutrickz.blogspot.com/2021/09/defer-image-lazyload-with-animation.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 57576220203161290}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'postContent', 'id': 'Blog1', 'posts': [{'id': '57576220203161290', 'title': 'defer image lazyload with animation effect | Speed up page load by deferring images', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bLeQ0JtZT4sQAwHVr2vcV0Sh1cXSRJ3kFZ4o4oc6rqZPf2AScdBrYxIeSluGwgnqwIMLDDq_uVE4UAUpoqrAdBDQqw9gGiEjyCihCAGy-djxjvcBu-wtGjoCbSxObMJNFbgM2RhobSk/w640-h360/20210917_115334_0000.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}, {'title': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'popular', 'id': 'PopularPosts2', 'posts': [{'title': 'How To Add Custom Google Translate Button On Your Website?', 'id': 5371994812086292964}, {'title': ' Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ] ', 'id': 9130507176988353748}, {'title': '[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes', 'id': 4111069201761851050}, {'title': 'How To Add Custom Google Translate Button On your Website?', 'id': 6486639804398665261}, {'title': 'How to Create Automatic Safelinks on Blogger\x27s Main Blog', 'id': 4387528619928926608}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'postContent', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'popular', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>