jQuery导致“白色”加载

Question

I've searched this a bit on the forum, and can't seem to figure out how to fix the common issue of white flashing when a new page loads.

I've tried Chris Coyer's example of placing this above my other javascript:

    // Prevent variables from being global
(function () {

      /*
          1. Inject CSS which makes iframe invisible
      */

    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] ||
              document.getElementsByTagName('script')[0];

    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

    ref.parentNode.insertBefore(div, ref);

    /*
        2. When window loads, remove that CSS,
           making iframe visible again
    */

    window.onload = function() {
        div.parentNode.removeChild(div);
    }

})();

but, still flashing. I'm a noob to javascript, so I'm not really sure what I'm doing wrong.

The page that is the worst is: http://thegoodgirlsnyc.com/test/new/index3_7.php

Answer 1

If you're using Jquery try wrapping your function with:

$(document).ready(function(){
 /* Code goes here */
});

This will execute your code when the document is ready (fully loaded)

Answer 2

The problem is that you're executing tasks throughout the pageload. You're getting the flashing because code is being run in-time with page load.

You need to abstract the running of the code behind a unified point. This is where things like $(document).ready() are nice from jQuery. It happens upon DOM completion, but before window load completion. This means it happens before visual, which prevents screen flash Javascriptiong.

It seems like you're worried about the global namespace:

jQuery( function($){
    $('iframe').hide();

    $(document).ready( function(){
        $('iframe').show();
    });
});

This is an easy solution that alleviates the namespacing issue, and you won't have to refactor current code. So my answer is two parts:

1. Use jQuery.

2. Use namespacing.

If you still get screen flashing using the above, you need to set the display to none in the stylesheet for the iframe element.