2

Okay, so I have a page that has some high-res images that look great when loaded (but not so great when users see half-loaded ones at initial page download). I've researched jquery pre-loading images (such as this very helpful Q/A here), but the thing is, my page is basically an app controlled by Ember.js -- so I'm not sure where to best insert the image-preloading code, and I can't seem to find any documentation on Ember.js code being run before page completes loading (the ready function might be too late for preloading images as it runs after the page is finished right?)

Bottom line: If I have Ember.js, where's the most optimal place to put image pre-loading code?

Community
  • 1
  • 1
Uzumaki Naruto
  • 547
  • 5
  • 18

2 Answers2

4

It doesn’t matter, you can preload images at any time using javascript.

But you need to consider bandwidth consumption and possibly parallell download slots limitations in some browsers, so I advise against preloading many large images before your app and UI is complete.

Here is a minimal code example:

(new Image).src = 'preload.jpg';
Ben Swinburne
  • 25,669
  • 10
  • 69
  • 108
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • Could you explain more about this? Not sure what you mean by 'But you need to consider bandwidth consumption and possibly parallell download slots limitations in some browsers, so I advice against preloading many large images before your app and UI is complete.' – Uzumaki Naruto Dec 01 '12 at 17:21
  • 1
    What I mean is that I assume you want your App to load as quick as possible. If you push large images into memory before the App is loaded, it might affect the App/UI loading time negatively. You want to preload images discrete in the background, without any side-effects. So I suggest you start preloading while the user is using the App (after it’s loaded). – David Hellsing Dec 01 '12 at 17:25
1

Basically u want to write a function which needs to run before Emberjs Application class/object. So u can run that function either before creating or initializing Application object. I suggest you to do that before creating Application object.

thecodejack
  • 12,689
  • 10
  • 44
  • 59
  • I see. Is there any way to basically enforce a white screen + a bit of CSS loading animation while this function is executing and before all the assets/images are loaded? – Uzumaki Naruto Dec 01 '12 at 17:22
  • 2
    @UzumakiNaruto I would strongly advice against that, sounds to me like Flash 1998 all over again ;) – David Hellsing Dec 01 '12 at 17:26
  • @David LOL - yeah, my whole point was to avoid Flash 1998 tackiness. – Uzumaki Naruto Dec 01 '12 at 17:57
  • 1
    i agree with David here...but yes u can have loading bmp while running the preload fn..u can find jquery plugins for doing same...if want to make it urself...simple way to start is use settimeout func... – thecodejack Dec 03 '12 at 06:10