Loading certain images upon certain events (not on page load)

Question

Is there a way in JS/jQuery to "block" the loading of certain images in the DOM, up until a certain event occurs?

In my case, I have a page of products (WooCommerce Shop page) where clicking a product opens a modal window containing the image gallery of that particular product. But instead of loading galleries of all products on page load (too slow) I'd like to bind the loading of the image gallery to the opening of the modal window.

I'm guessing it's not really possible but perhaps there's some trick that comes close?

Add an `img` element in your modal window without `src` attribute and update the `src` attribute when you select a product — Arkantos, Jan 01 '16 at 12:45

score 1 · Accepted Answer · answered Jan 01 '16 at 12:58

1

You can add an img element in your modal window without any src attribute and update the src attribute based on the product selection.

Here's a Pen showcasing the idea :)

answered Jan 01 '16 at 12:58

Arkantos

6,530
2
16
36

I answered probably while you were finishing your answer :) – drake035 Jan 06 '16 at 20:12

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

A satisfying way to achieve the same end result is to sabotage the src attribute of images, and then restore this attribute later on with JS.

Found at https://stackoverflow.com/a/5402812/871404 (thanks @arkantos too!)

edited May 23 '17 at 12:23

Community

1
1

answered Jan 01 '16 at 12:54

drake035

3,955
41
119
229

1

yea.. also, instead of `lsrc` you might want to do something like `data-src` or something. More meaningful as a HTML5 data attribute that nothing. – loxxy Jan 01 '16 at 12:56

Loading certain images upon certain events (not on page load)

2 Answers2