-1

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..

Jitender Mahlawat
  • 2,964
  • 3
  • 16
  • 12
  • Yes, please reference the FAQ. http://stackoverflow.com/faq – mrtsherman Jan 21 '13 at 04:18
  • use `base64 encoded image` for large images. – jogesh_pi Jan 21 '13 at 04:19
  • I'm not sure your question is clear... are you trying to change the background image of a div ($('#divID').css('backround-image', 'imgurl.jpg')) or are you trying to take an image from the page and move it to the background? If you are trying to move it, you would need to pull the URL of the image from the dom object and then add it to the background as listed above. Then you would just remove the image, hide it or reset its src attribute ($().attr('src','')). But really not sure what you are trying to do - so please clarify – Adam Jan 21 '13 at 04:20
  • possible duplicate of [Preloading CSS Background Images](http://stackoverflow.com/questions/1373142/preloading-css-background-images) – Bergi Jan 21 '13 at 04:22
  • @jogesh_p If we use bas64 encoded image it will take a lot of time.... – Jitender Mahlawat Jan 21 '13 at 04:25

1 Answers1

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.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • this will create new tag and assign it attribute ? where it is appended/prepended/inserted into the DOM? – Muhammad Talha Akbar Jan 21 '13 at 04:21
  • @AspiringAqib it doesn't have to be appended to the DOM to load and cache the image – Explosion Pills Jan 21 '13 at 04: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 04: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 04: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 04:43