1

I'm building an image heavy mobile web app with jQuery Mobile. It is highly interactive with some pretty sweet UX features. However, it is going to be disruptive to the experience if a person starts interacting with some pages until all the images have been loaded. Is there a way I can make the page only show once all the images have been loaded?

styke
  • 2,116
  • 2
  • 23
  • 51

1 Answers1

3
  • Lay a div (transparent or with a loading text) over your whole page, so nothing is clickable.
  • Wait until all images are loades (using the onload event of the images - test this in different browsers, I remember having trouble in Safari browser with this)
  • Once all images are loaded, remove the overlaying div
Uooo
  • 6,204
  • 8
  • 36
  • 63
  • 1
    this is a nice way of doing it! thumb up! – user123_456 Apr 11 '13 at 09:39
  • I was hoping there maybe some obscure JQM option I can't find with which I would be able to set to achieve what I need, but this is a really nice way of going about it. – styke Apr 11 '13 at 09:41