I am working on a blog which will contain a lot of photos, for this reason I want to prevent the images to load until i say them to.
There are images in the HTML code (the preview images) and some that I will add later with jQuery (for example to enlarge the preview images).
I had no trouble with handling the images added by jQuery, because i stored the images for preloading in a seperated container and just added the "src" attribute with the .on('load', function(){}) to the real image when the preload image finished loading.
For the images which are in the HTML code I tried the same. After DOM ready I iterate through them and remove the src-Tag by .attr('src', '') but which will not prevent the images from loading and blocks me all the traffic. I even tested removing every image on DOM ready with $('img').remove(), but Firebug and Chrome element inspector still show the network traffic caused by loading all these images.
So my question is: Does the removing src attribute hack not work on images defined in the HTML code? Is there a posibility to stop loading these images? Isn't the order of requests first loading the HTML, then applying the js code and then get the image requests?
Do I otherwise need to regulate this through ajax requests (what i want to avoid)?
The website I do refer to (Link to a post with images): http://www.pablosichert.de/blog/#/UID17