Lately load images is a good technique to improve the site speed by conditionally loading images when they are only at visible point on the screen. We make use of some littlejavascript code in order to lazy load images in blogger website. Thereare lot of plugins available for WordPress based websites. Here we will achieve lazy loading images for bloggerblogspot websites.
A quick overview of what will happen if we enable lazy loading images in blogger blogspot websites. What this lazy load will do is it will not directly download all the images available on a particular URL if that URL is loaded in the web browser. Instead this lazy loading images script will postpone the loading of images only when that image falls under view point. If there are many images on a long web page then only the image that is currently viewed by the visitor in the screen is loaded. When you scroll down the web page if another image comes in to the view point then that image will be loaded at that particular instant with the action of lazy load images code in your blogger blog.
What is the advantage to lazy load images?
Your web page will load faster with out loading all the images at a time.
Content is loaded first with out waiting for the images.
It saves lot of bandwidth, since it’s a blogger website you don’t care about bandwidth as it is free.
It reduces HTTP image requests at the loading time.
Your website visitors get good user experience.
How to implement lazy loading images in blogger blogspot websites
All you need to do is just edit your blogger blogspot template and insert a small piece of code in to it. This is a javascript code that should go in to the head section to get implemented properly. Don’t panic it will not decrease the site speed(As it is javascript) This is the implementation to increase the speed of the website.
Step 1: Go to your blogger blog and click on templates.section in your template and just before insert the below code.
Step 2: Click on Edit Template for inserting the lazy load images code into the template.
Step 3: Locate the
<script type=<span style="color: maroon;">'text/javascript'</span>><span style="color: green;">//CDATA[
(<span style="color: blue;">function</span> (a) {
a.fn.lazyload = <span style="color: blue;">function</span> (b) {
<span style="color: blue;">var</span> c = {
threshold: 0,
failurelimit: 0,
event: <span style="color: maroon;">"scroll"</span>,
effect: <span style="color: maroon;">"show"</span>,
container: window
};
<span style="color: blue;">if</span> (b) {
a.extend(c, b)
}
<span style="color: blue;">var</span> d = <span style="color: blue;">this</span>;
<span style="color: blue;">if</span> (<span style="color: maroon;">"scroll"</span> == c.event) {
a(c.container).bind(<span style="color: maroon;">"scroll"</span>, <span style="color: blue;">function</span> (b) {
<span style="color: blue;">var</span> e = 0;
d.each(<span style="color: blue;">function</span> () {
<span style="color: blue;">if</span> (a.abovetop(<span style="color: blue;">this</span>, c) || a.leftofbegin(<span style="color: blue;">this</span>, c)) {} <span style="color: blue;">else</span> <span style="color: blue;">if</span> (!a.belowfold(<span style="color: blue;">this</span>, c) && !a.rightfold(<span style="color: blue;">this</span>, c)) {
a(<span style="color: blue;">this</span>).trigger(<span style="color: maroon;">"appear"</span>)
} <span style="color: blue;">else</span> {
<span style="color: blue;">if</span> (e++ > c.failurelimit) {
<span style="color: blue;">return</span> <span style="color: blue;">false</span>
}
}
});
<span style="color: blue;">var</span> f = a.grep(d, <span style="color: blue;">function</span> (a) {
<span style="color: blue;">return</span> !a.loaded
});
d = a(f)
})
}
<span style="color: blue;">this</span>.each(<span style="color: blue;">function</span> () {
<span style="color: blue;">var</span> b = <span style="color: blue;">this</span>;
<span style="color: blue;">if</span> (undefined == a(b).attr(<span style="color: maroon;">"original"</span>)) {
a(b).attr(<span style="color: maroon;">"original"</span>, a(b).attr(<span style="color: maroon;">"src"</span>))
}
<span style="color: blue;">if</span> (<span style="color: maroon;">"scroll"</span> != c.event || undefined == a(b).attr(<span style="color: maroon;">"src"</span>) || c.placeholder == a(b).attr(<span style="color: maroon;">"src"</span>) || a.abovetop(b, c) || a.leftofbegin(b, c) || a.belowfold(b, c) || a.rightfold(b, c)) {
<span style="color: blue;">if</span> (c.placeholder) {
a(b).attr(<span style="color: maroon;">"src"</span>, c.placeholder)
} <span style="color: blue;">else</span> {
a(b).removeAttr(<span style="color: maroon;">"src"</span>)
}
b.loaded = <span style="color: blue;">false</span>
} <span style="color: blue;">else</span> {
b.loaded = <span style="color: blue;">true</span>
}
a(b).one(<span style="color: maroon;">"appear"</span>, <span style="color: blue;">function</span> () {
<span style="color: blue;">if</span> (!<span style="color: blue;">this</span>.loaded) {
a(<span style="color: maroon;">"<img />"</span>).bind(<span style="color: maroon;">"load"</span>, <span style="color: blue;">function</span> () {
a(b).hide().attr(<span style="color: maroon;">"src"</span>, a(b).attr(<span style="color: maroon;">"original"</span>))[c.effect](c.effectspeed);
b.loaded = <span style="color: blue;">true</span>
}).attr(<span style="color: maroon;">"src"</span>, a(b).attr(<span style="color: maroon;">"original"</span>))
}
});
<span style="color: blue;">if</span> (<span style="color: maroon;">"scroll"</span> != c.event) {
a(b).bind(c.event, <span style="color: blue;">function</span> (c) {
<span style="color: blue;">if</span> (!b.loaded) {
a(b).trigger(<span style="color: maroon;">"appear"</span>)
}
})
}
});
a(c.container).trigger(c.event);
<span style="color: blue;">return</span> <span style="color: blue;">this</span>
};
a.belowfold = <span style="color: blue;">function</span> (b, c) {
<span style="color: blue;">if</span> (c.container === undefined || c.container === window) {
<span style="color: blue;">var</span> d = a(window).height() + a(window).scrollTop()
} <span style="color: blue;">else</span> {
<span style="color: blue;">var</span> d = a(c.container).offset().top + a(c.container).height()
}
<span style="color: blue;">return</span> d <= a(b).offset().top - c.threshold
};
a.rightfold = <span style="color: blue;">function</span> (b, c) {
<span style="color: blue;">if</span> (c.container === undefined || c.container === window) {
<span style="color: blue;">var</span> d = a(window).width() + a(window).scrollLeft()
} <span style="color: blue;">else</span> {
<span style="color: blue;">var</span> d = a(c.container).offset().left + a(c.container).width()
}
<span style="color: blue;">return</span> d <= a(b).offset().left - c.threshold
};
a.abovetop = <span style="color: blue;">function</span> (b, c) {
<span style="color: blue;">if</span> (c.container === undefined || c.container === window) {
<span style="color: blue;">var</span> d = a(window).scrollTop()
} <span style="color: blue;">else</span> {
<span style="color: blue;">var</span> d = a(c.container).offset().top
}
<span style="color: blue;">return</span> d >= a(b).offset().top + c.threshold + a(b).height()
};
a.leftofbegin = <span style="color: blue;">function</span> (b, c) {
<span style="color: blue;">if</span> (c.container === undefined || c.container === window) {
<span style="color: blue;">var</span> d = a(window).scrollLeft()
} <span style="color: blue;">else</span> {
<span style="color: blue;">var</span> d = a(c.container).offset().left
}
<span style="color: blue;">return</span> d >= a(b).offset().left + c.threshold + a(b).width()
};
a.extend(a.expr[<span style="color: maroon;">":"</span>], {
<span style="color: maroon;">"below-the-fold"</span>: <span style="color: maroon;">"$.belowfold(a, {threshold : 0, container: window})"</span>,
<span style="color: maroon;">"above-the-fold"</span>: <span style="color: maroon;">"!$.belowfold(a, {threshold : 0, container: window})"</span>,
<span style="color: maroon;">"right-of-fold"</span>: <span style="color: maroon;">"$.rightfold(a, {threshold : 0, container: window})"</span>,
<span style="color: maroon;">"left-of-fold"</span>: <span style="color: maroon;">"!$.rightfold(a, {threshold : 0, container: window})"</span>
})
})(jQuery);
$(<span style="color: blue;">function</span> () {
$(<span style="color: maroon;">"img"</span>).lazyload({
placeholder: <span style="color: maroon;">"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw5kDEgKCimbKG_dW5jFlgVy6LZK5wQ0Y42-lOLxkPVXlKhlBoC9WmlOga8TOFROdWtOuZhSsQQpKKjy0i_jmcw-1kRzoriYTRJE6HiyyHYH-MlVH2s0vJV5rRIyJBoeEpq1214UvzTmiB/s1600/placeholderweblogcode.png"</span>,
effect: <span style="color: maroon;">"fadeIn"</span>,
threshold: <span style="color: maroon;">"-50"</span>
})
}) <span style="color: green;">//]]>
<<span style="color: maroon;">/script></span>
Step 4: Now save your template and visit your blogger website to check the speed of the site and see the magic of the lazy loading images in blogger website. Note that you have to clear the cache and better you run ccleaner software or else open incognito window in google chrome and test your website URL for lazy loading images in blogger.Many of the lazy load plugins do not support thumbnail that are automatically generated from the post and displayed in the homepage and archive pages. The Good news is that this script supports even thumbnail images and even load thumbnails conditionally after reaching the viewpoint in the blogger blogspot website.
0 comments