How can I control image loading when I can't modify some of the source code?

Question

I'm working in a templating system that uses a series of plugins to output some markup. One of these plugins is a gallery that contains multiple images. As the gallery sizes grow, load speed gets impacted and I'm trying to come up with a creative approach to work around it.

Here's an example:
{% plugin gallery %}

will become:

<div id="gallery">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
</div>

I can't control the content that's being output, only wrap it with additional HTML. This obviously results in 5 images being loaded

One technique to load images when you want them is to give them a fake attribute that you then turn into src when you want to load (e.g. ) but I can't edit that output.

Another idea I had was wrapping all the output with something to prevent load, like an HTML comment, and then stripping that off / using the data with some JavaScript to reconstruct the image elements as needed and append them back to the DOM. This seems hacky and I'm out of ideas.

Summary:

• I want to prevent images from loading so I can load them as I want them and control page load better.
• I cannot edit the markup of the image tags, but can wrap with additional markup.
• I'm constrained to client-side languages (HTML/JS). I cannot use server-side languages or modify the server itself in this situation.

Any other techniques that may work here?

Answer 1

Wrap it in a code block and parse it back out in Javascript. You've sort of thought of that but this won't suffer from the problem mentioned in jfriend00's answer re. comments.

Basically yes, you have to do something hacky because the non-hacky thing is to receive fewer imgs.

• Does the server support pagination or a max request size?
• Does the templating system support a max request? Or logic of the basic form if(num > MAX) return; ?

Answer 2

If you're saying that you cannot change the <img> tags in the HTML content, then you're stuck. Nothing you can do with javascript or with HTML around it will prevent them from loading and then allow you to take control over when they load.

Javascript cannot operate on the DOM until after the images have already started loading so they will be already loading when you get control with javascript.

Wrapping in an HTML comment will likely be problematic in some browsers because I've read that not all browsers keep the content that is inside the comment.

Various ways to render the images invisible with a CSS rule (display: none or visibility: hidden) will not prevent them from loading.