5

My CMS project has a stylish web 2.0 login screen that fades over the screen using javascript. How come that even though I have made 120% sure that images are preloaded (I used the resource monitor in development tools) they still take a second to show up when my login screen appears. It completely destroys the fanciness! Take a look:

http://www.dahwan.info/Melior (link broken)

When you click login, the screen is supposed to fade to dark using a 75% alpha 1px png image. Even though the image is preloaded, it doesn't show up until after the animation is done. However, if you click cancel and log in again, the animation flows smoothly and perfectly.

Can anyone think of a solution to this problem? I'm having it with the rest of my CMS' GUI as well. It's like there was no image preloading what so ever.

Thanks for answers

EDIT: Ah yes, I'm currently developing this CMS for Google Chrome 5.0.375.99, adding multi browser compatibility later. Sorry for leaving that out

Hubro
  • 56,214
  • 69
  • 228
  • 381
  • 2
    Might be worth mentioning browser(s) you've seen the problem in. I just tried it in Firefox 3.6 and it seemed to work correctly. – Jake Jul 12 '10 at 18:49
  • The link crashes my browser tab (IE 8 - Vista 32bit) – ZippyV Jul 12 '10 at 18:50
  • 1
    Sorry for the anti-answer, but have you considered not using an image? I have used jQuery Tools overlay (http://flowplayer.org/tools/demos/overlay/custom-effect.html) with success in the past. If you want to do it yourself, you might want to just use a fixed background rgba image. For the record, the screen works fine for me. – Steven Jul 12 '10 at 18:53
  • Steven, i have considered it, but it would hardly help considering the rest of my GUI which has a more complex design using larger images. Thanks for the suggestion though – Hubro Jul 12 '10 at 18:55
  • It works fine on my Firefox 3.6.6, Opera 10.60 and Safari 5.0, but crashes IE 8. – Mike Jul 12 '10 at 18:56
  • You do not need the dimensions plugin, it comes with jQuery (and has done for a good while). Check the compatability of the other plugins also – redsquare Jul 12 '10 at 18:56
  • 1
    Works fine for me, and I'm running the stated Chrome version. – Puppy Jul 12 '10 at 18:59
  • It seems odd that this problem persisted for me testing it on 3 different computers in Opera, Chrome and Firefox. The first time i hit login, the background doesn't fade in at all, it merely pops into place after a 250ms delay. After that it fades like it's supposed to. I'm theorizing that just caching the image is not enough, and due to lack of "computer power" in my low-end computers it takes a while for the images to load into the RAM and be displayed after they're added to the DOM for the first time. I don't know much about this, but could there be any merit to my theory? – Hubro Jul 12 '10 at 19:04
  • @Codemonkey: If you display the image over, say, the top-left pixel, it will force it to be in a renderable state. Then, when the user clicks login, it MUST already be in the browser and DOM. – Puppy Jul 12 '10 at 19:05
  • Yes, also crashes IE7 for me, but no errors reported otherwise in any other browsers I tested (chrome, FF, Safari). IE is reporting an endless loop. You could save a bunch of brain damage with a pre-done modal system as mentioned above. It would allow you to do the background images, etc and you'd know that it would be cross-browser capable. – bpeterson76 Jul 12 '10 at 19:10
  • @DeadMG I thought in the same regions as you, but i decided to load them into a non displayed Div tag. I've posted the solution as well. Thanks for your help :) @bpeterson I was unaware that IE reported an endless loop. That will undoubtedly help me a great deal when i start debugging in IE. Thanks :) – Hubro Jul 12 '10 at 19:31

4 Answers4

2

I have come up with a workaround to my problem. I have now tested this in three browsers on two different computers with perfect results. In short, in my image preloading function in javascript, i added each of the images into the DOM in an invisible Div tag.

$('#img_preload').append($('<img />').attr('src', img.src));

The images now being added to the Dom at page load, and according to my theory resting in the memory of my low-end computers, they appears instantly when my CMS needs them.

Thanks for your comments :)

Hubro
  • 56,214
  • 69
  • 228
  • 381
2

A useful information about this problem:

The Codemonkey solution works because, by putting the images in a hidden div, the browser have to keep those images in memory and ready for a possible change of div's visibility. If the user needs to change de visibility of div from hidden to block, it has to be done instantly. This is why just load all images into an array doesn't work properly.

Jr. Hames
  • 215
  • 2
  • 13
  • 1
    Well using an array to store image ojects has worked for me for years. So, please try to refrain from making comments that you are not 100% certain of.... – exoboy Jul 14 '10 at 21:53
1

You could also just preload them into an array. Your problem might be caused by what is known as "garbage collection". This is where the browser looks for objects that are consuming memory which no longer have an instance on the screen and are not being referenced by anything else in memory.

If you preload images into your web age, they should be loaded into the cache, though. So, they should still re-appear when referenced again. However, images can also disappear if the cache expiration is not set for a long enough length of time for these types of files.

Your problem could also be browser-specific.... I have found that it is always best to create an "anchor" for pre-loaded content by placing them into an image array and then using the array to call up the images when needed instead of the image URL(URI).

Here is a quick-and-dirty article that covers this topic.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Community
  • 1
  • 1
exoboy
  • 2,040
  • 2
  • 21
  • 29
  • Loading the images into an array is the method I was using already. I apologize again for supplying so little information. Anyway, I've solved the problem and replied with it :) – Hubro Jul 13 '10 at 00:41
  • Cool! I am glad it works well. But, the way you are doing it will actually take up space on the stage(page), whereas mine will keep it in the ethereal plane (memory) without any risk of a physical presence on the stage or chance of displacing content and it does not require any CSS to be defined. – exoboy Jul 13 '10 at 04:32
0

The UI thread can only manage one task at a time -- it will either execute javascript or update the UI. If there is a lot of javascript parsing/executing before the code that preloads the image, that might be causing the delay.

Another suggestion is to disable clickability on the login link until after the image has been detected on the page.

To do so is fairly straightforward:
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}

To re-enable, set btn.disabled = false (after detecting that your image has been added to the DOM).

frabjousB
  • 104
  • 3
  • I have excluded images being loaded slowly as a cause to my problem, seeing as in some cases I have been examining the resource monitor for several minutes, and even seeing the images in the monitor, before clicking the login button. But thanks for your reply – Hubro Jul 12 '10 at 19:16