I need to add DOM Image Object in Div Background .If I add image URL direct in Div background It takes time to load . But If I will take it in image object then I will show div on image on-load event.But I don't Know how to add image object in Div Background..
1
With jQuery you can preload images very easily just by creating an image element but not appending it:
$("<img>").attr('src', sourceToPreload);
If you're talking about changing the background image CSS, just use .css
.
-
this will create new <img> tag and assign it attribute ? where it is appended/prepended/inserted into the DOM? – Muhammad Talha Akbar Jan 21 '13 at 4:21
-
@AspiringAqib it doesn't have to be appended to the DOM to load and cache the image – Explosion Pills Jan 21 '13 at 4:26
-
ahhh smart buddy :D now i understand you. +1 :) jQuery loads an image very quickly and its an huge advantage. Doesn't it depends upon user browser settings to cache objects or elements or document? – Muhammad Talha Akbar Jan 21 '13 at 4:27
-
@AspiringAqib I've never seen this not work for preloading an image. It's plausible that it would not work depending on the browser and settings, but in that case I'm sure that no alternative technique would work either. – Explosion Pills Jan 21 '13 at 4:30
-
creating an image dynamically and appending it in div and styling it as
position:absolute, top:0, left:0, z-index:-1;
may work what do you think? i never tried this with jQuery :D – Muhammad Talha Akbar Jan 21 '13 at 4:43
base64 encoded image
for large images. – jogesh_pi Jan 21 '13 at 4:19