Load image only when scrolled into view?


I have a long page where I want images loaded only when they first come into view. I saw this:


So the technique shown there is

<img src="" realsrc="/myimage.png" />


      var t = $(this);
      if(t.position().top > ($(window).scrollTop()+$(window).height()){
        t.attr('src', t.attr('realsrc')); // trigger the image load
        t.removeAttr('realsrc'); // so we only process this image once


My question is, where in gutenberg or the media uploader would I alter image insertion so my images are inserted in this format:

<img src="" realsrc="/myimage.png" />

I am trying to rely less on plugins and more so on custom edits that I will just keep track of. So trying to figure out where in WordPress core I would alter the insertion of image tags. I suppose there is some apply_filters(), but again, I don’t want to get in the habit of relying on wordpress hooks and filters since I want to have default behaviors that don’t rely on hooks and filters.



, , Brian 3 years 2019-10-22T02:38:37-05:00 0 Answers 84 views 0

Leave an answer