How to Overcome the Problem of Defer Offscreen Images Without Jquery or Lazy Loading

Rudiruzt
2 minute read
How to Overcome the Problem of Defer Offscreen Images

How to Overcome the Problem of Defer Offscreen Images Without Jquery or Lazy Loading - One problem that reduces blog loading is image. Defer offscreen images and Serve images in next-gen formats are problems loading blogs that appear from images.

Actually, to overcome the problem of Defer off screen images and Serve images in next-gen formats, there is a solution. However, because both of them need special handling in storing HTML code for images, so many bloggers ignore it for "complicated" reasons.

In fact, editing an image to follow the two methods was quite easy, but because it was "lazy" it became "difficult".

How to Overcome the Problem of Defer Offscreen Images Without Jquery or Lazy Loading


1. First Solution


 For the Defer offscreen images problem, we can use the method from https://varvy.com/pagespeed/defer-images.html and for the Serve images in next-gen formats this problem can use the method from the following post.

So if the two tricks are combined, here's what to do:

Save the following Javascript above </body>

<script>
//<![CDATA[
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>


to display the picture



<picture>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/rw/blogger-images2.png" type="image/webp"/>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/s1600/blogger-images2.png" type="image/png"/>
  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>
</picture>



2 Second Solution

As for the Defer offscreen images problem, I also tried to make my own Javascript and it worked. And for the issue of Serve images in next-gen formats also uses the same method as the first method, there is only a slight difference, namely the image plus the tag <div class="lazyloadimg"><!--  and  --></div>


Following the Javascript code, save it above the </body>
code

<script>
//<![CDATA[
function init() {
var x = document.querySelectorAll(".lazyloadimg");
var i;
for (i = 0; i < x.length; i++) {
    x[i].innerHTML = x[i].innerHTML.replace('<!--','').replace('-->','');
}
}
window.onload = init;
//]]>
</script>

to display each picture, use the following example:

<div class="lazyloadimg"><!--
<picture>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/-rw/blogger-images2.png" type="image/webp"/>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/s1600/blogger-images2.png" type="image/png"/>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJwGen4oXDunL49Qd6JUYdDMaBm0chMogOtKDMxOeR1WPxA1n_CKmQHtALEj0Bg42IK4TL0rvFPaWrPbHrbqH2ghQz0zuNkZKAda8x0C-hGcjvi0RNz2JxN3jKwcN1BAxHryZOhYxPrc/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>
</picture> --></div>