Well, the lazy loader is a very effective way to optimize your blog page loading speed. It can improve loading speed to a great extent. The lazy loader also makes your website performance increases by reducing your loading time and the site’s bounce rate. But sometimes this lazy loader for images create problem mostly in case of the sidebar. Due to the lazy loader, the images in your sidebar start loading only if your complete post(post-body) gets loaded i.e your sidebar's image will not load until the visitor scrolls to the end of the page. Those who are using a lazy loader for images must be knowing its working and many of you find this a big problem and really it is very irritating. Lazy loader mostly affect the affiliate marketing ads, as most of the users use their affiliate image banner in sidebar and visitor can't see that banner at the opening of the article it will be going to load only if a visitor scrolls your page to the end and in 80% visitor closes your site without seeing your banner ad
If you want to add lazy loader in your blogger blog then read this article: How to Add "Lazy loader for Images in blogger
Read Now!
You can also use these few other ways...
So in this article, I have come up with the solution that you can disable lazy loader for images for specific images from your blogger blog by just using some simple code snippet and this code will disable lazy loader for a particular image and you can overcome up with is the problem.
Open your theme and click edit HTML then locate your lazy loader code which is looking some like this:
If you are using any different code I recommend you use my code so you can easily set up the code which I am going to discuss below. One thing more always kept you lazy loader code in between body tag {<body>.....</body>}
Now you can find this type of code
in your lazy loader code snippet. Now what you have to do is that replace this code with the code given below and save your theme.
{$('img').lazyload
{$('img:not(.notlazy)').lazyload
You can also use these few other ways...
$('img.lazy:not(.notlazy)') $('img.lazy').filter(function() {return !$(this).hasClass('notlazy');});
Now in the very next step, you have to go to the image's URL to which you want to disable lazy loader.
For example, this is the URL of image which you want to disable lazy loader: "<img Paste code there src="https://media.go2speed.org/brand/files/grammarly/2/20150514114428-04slides300x250.gif" width="300" height="250" border="0" /></a>"
Now you have to paste this code
after the opening image tag (<img) and save your URL.
So after pasting the code you URL will look something like this:-
<img class='notlazy' Paste code there src="https://media.go2speed.org/brand/files/grammarly/2/20150514114428-04slides300x250.gif" width="300" height="250" border="0" /></a>"
class='notlazy'
So after pasting the code you URL will look something like this:-
<img class='notlazy' Paste code there src="https://media.go2speed.org/brand/files/grammarly/2/20150514114428-04slides300x250.gif" width="300" height="250" border="0" /></a>"
And now reference your page and you will see that lazy loader for images has been disabled from that image.
If you face any problem then drop a comment in the comment box and I will try to solve it.
Keep sharing the information
2 Comments
Thanks for the Information, I like your post and blog. Also I have share your link to my social media. Keep posting
ReplyDeletebest protein powder in india
Thanks Srishti Verma! I am glad to hear that you like my post. Stay tuned for more such articles.(y)
DeleteAny Comment having the intention of spamming will not publish nor any irrelevant advertisment link will allow in the comment. Thanks!