## Load image only when scrolled into view?

Question

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

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