How to deal with hidden images above the fold

Question

I currently use two techniques to load images into my webpages. Firstly, I use LazyLoad to deal with images that are below the fold. This technique seems to work well. The second technique I use is for images above the fold but which are initially hidden from view, they are usually revealed to the user using the onclick or hover events. The defer technique I use is to load all these images after the page has loaded (when the onload event fires).

Google Page Speed Insights doesn’t seem to like my defer technique and reports these hidden images as an opportunity under ‘Defer offscreen images’. I’ve realised that there is a difference between the onload event and the Time to Interactive (TTI) ‘event’ that Google uses in Page Speed Insights. Can anyone advise on a JavaScript technique to replace my ‘defer’ technique which would satisfy Googles criteria.

Here are the messages I get from Page Speed Insights. All the images mentioned here are hidden images above the fold which are loaded after the onload event fires.1

And here is the Waterfall chart to show that the images are loaded after the load event.2

Thanks for you help.

Have you tried [this](https://stackoverflow.com/questions/12396068/speed-up-page-load-by-deferring-images) ? — awran5, Mar 08 '19 at 13:46
I'm using slimier technique and i got 100 score. What is the exact error do you get? — awran5, Mar 08 '19 at 13:51
I've added the messages I'm getting from PSI. I've also double checked the article you mentioned earlier to see if I'd missed something but I don't think I have. The images reported in PSI are definitely being loaded after the onload is fired according to dev tools. — Netgiant Glen, Mar 08 '19 at 14:03
This means that your technique is not working properly or PSI doesn't recognize it. Do you get any errors in your browser console? also are you using CloudFlare or some other caching systems? — awran5, Mar 08 '19 at 14:08
Well, we use a CDN but I don't see how the caching of an image can have an impact on how PSI interprets things.? — Netgiant Glen, Mar 08 '19 at 14:12
It does, CDN' usually cache all the static resources include .js files which probably have your code, so when you test your site, PSI uses the cached version. Just try to put on it hold and/or clear the cache and test again. — awran5, Mar 08 '19 at 14:19
The .js code is bundled so whenever it changes the hash is changed which means you always get the up to date version of script. — Netgiant Glen, Mar 08 '19 at 14:39
If you can, please link the website you are currently testing. — awran5, Mar 08 '19 at 14:45

awran5 · Answer 1 · 2019-03-08T17:34:39.237

~~I couldn't know if you have other technique loaded, but the one that i see loaded is coming from bootstrapBundle.js~~

Update

Remove all the classes that make the images hidden hidden-xs hidden-sm and add them later after the page load. Also, add class lazy again to let the bootstrapBundle.js technique handle them.

$(document).ready(function () {
  // Select your images by class 'deferImage'
  var imgDefer = $('.deferImage');
  // Loop through them and add classes 
  for (var i = 0; i < imgDefer.length; i++) {
    $(imgDefer[i]).addClass('hidden-xs hidden-sm');
  }
});

I've test it and it seems to work. Please follow the example below:

Example:

$(document).ready(function() {
  // Select your images based on class 'deferImage'
  var imgDefer = $('.deferImage');
  // Loop through them and add classes 
  for (var i = 0; i < imgDefer.length; i++) {
    $(imgDefer[i]).addClass('hidden-xs hidden-sm');
  }
});

img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.cartridgemonkey.com/bundles/bootstrapBundle.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide1" data-target="#popup" data-toggle="modal"></div>
    </div>
    <div class="col-md-4">

      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide2" data-target="#popup" data-toggle="modal"></div>
    </div>
    <div class="col-md-4">

      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide3" data-target="#popup" data-toggle="modal"></div>
    </div>
  </div>
</div>

Thanks awran5 but I don't think you read my original question. I'm using lazyload for some images - they are all OK. The ones that I want help with are the ones with the class deferImage, these images are above the fold but hidden and I load them when the onload event fires. The problem is that PSI doesn't seem to like that technique. — Netgiant Glen, Mar 08 '19 at 15:59
Indeed I missed the "above the fold" part, Though, my point was that I couldn't see where the other technique "loaded" on the page. Please see the answer update. — awran5, Mar 08 '19 at 17:29

How to deal with hidden images above the fold

1 Answers1