Images will still be loaded into the DOM if its containing block is set to display:none
. The only way you can stop an image from loading is to not define a src
attribute in the image tag. You would then add the src
attribute when you want to load the image.
Note that you cannot remove the src
If I were doing this, I would define images as follows:
<img class="loadimg" rel="IMAGE URL" src="" />
and load the images as follows:
Unless you are loading several huge images, and/or the images are on a slow server, I'm not sure this is worth the effort...