0

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

https://stackoverflow.com/questions/2321907/how-do-you-make-images-load-only-when-they-are-in-the-viewport

So the technique shown there is

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

$(document).ready(function(){

  $(window).scroll(function(){
    $('img[realsrc]').each(function(i){
      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.

thanks,

Brian

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.