I have constructed a lightbox for my website. For the purposes of this question, it consists of an img element, that is hidden by default using CSS.
When a thumbnail image on my site is clicked, the src of the img element is overridden using javascript with the appropriate path, and the img is then made visible.
My question is what do I set the img src to when the page is first loaded? If I leave the src blank, i get a browser warning. I would prefer not to load an actual image, as this uses bandwidth. I would prefer not to load a small transparent image of 1px, as this feels like a dirty hack.
Do I have any other options?
Create the img element with JavaScript.
If some markup (beyond the occasional placeholder div or span) adds nothing for the user before some JS runs, then don't put it in the markup in the first place. Add it with DOM manipulation when it is needed.