2

I'm running a script (hack) to trick Safari into correctly sizing a video on a responsive page. The script below waits a moment then hides, and then shows a video, causing Safari to realize it should expand the video to its proper size.

I'm worried that $(document).ready may fire the script too soon (i.e., before the video is loaded), thus causing the script not to do what it is supposed to do to the video. Is it possible that with $(document).ready the script may fire but since the video isn't loaded after the set milliseconds that the video will not be hidden/shown?

Should I use window.onload (or another method?) instead to ensure that my hide/show sizing hack works?

In my tests, the script mostly works, even on reloads when I clear the cache. But a few times when I've loaded the page on random computers the video will not size correctly until I reload the page. Using window.onload seems less ideal in that a user may notice the incorrectly sized video while the page content is loading, or see the hack in action after it does. 

<script><!-- Super hack to toggle display block/none which tricks Safari into properly sizing video-->
    $(document).ready(function() {
    $("#video1").delay(3000).hide(0, function() {
        $("#video1").delay(3500).show();
        });  
        });
 </script>
River
  • 8,585
  • 14
  • 54
  • 67
forestkelley
  • 341
  • 3
  • 14
  • 1
    I've cleaned up your initial statement a bit. Huge blocks of words can turn people away from a question, so I've tried to make it more manageable by separating it into related paragraphs (and added code formatting, which also improves readability) – River Feb 07 '16 at 16:34
  • See http://stackoverflow.com/a/3698214/5277935 – AMACB Feb 07 '16 at 16:40

1 Answers1

2

Here is the difference between the two events:

  • window.onload is fired after all the content (i.e. media and stylesheets) have been loaded. It is a DOM event

  • $(document).ready() is fired after the HTML document has loaded (i.e the very last closing tag has been loaded, the media and stylesheets may not have loaded yet). This event is technically unique to jQuery but, if aailiabe, jQuery actually uses the DOMContentLoaded DOM Event.

However, jQuery does have an event that only fires after all media has loaded, $(document).load(), however this is deprecated since 1.8

If you want your code to run before the video has loaded, use $(document).ready()

If you want your code to run after the video has loaded, use window.onload or $(document).load()

To answer your comment:

Provided the video has loaded by the time the delay have finished (totals to 7.5 seconds), your hack will work.

Even if the video has not loaded, the HTML element still exists, so it can be hidden and shown even before the video has loaded (though I am not sure if the hack will still work, it depends on how and when Safari decides the size of the video).

Obviously if the video hasn't loaded, hiding and showing will not alter anything visually, since the element is empty / has no content.

Kaspar Lee
  • 5,446
  • 4
  • 31
  • 54
  • Thanks @druzion. I know that with 'window.onload' my javascript will run and because my video is definitely loaded at that point, the effect of the script will be applied to it. However, using '$(document).ready()' I know that my script will be run likely before the video is loaded. So what is the result of that? Does that mean my show/hide hack will only work in cases when the video happens to be loaded when the document is ready? Or, will the script wait until the video that it is referencing loads, and only then execute? I'm not sure the basic rules address this. – forestkelley Feb 08 '16 at 17:23
  • Provided the video has loaded after the delays (totals to `7.5 seconds`), your hack will work. Even if the video has not loaded, the HTML element still exists, so it can be hidden and shown even before the video has loaded. Obviously if it hasn't loaded, hiding and showing will not alter anything visually, since the element is empty anyway. – Kaspar Lee Feb 09 '16 at 13:27
  • your last comment is exactly what I needed to know. Sounds like I must use `window.onload` with a shorter delay. Bonus about the 7.5 seconds total time. It didn't occur to me that the delays would run one after the other. I assumed they'd both be triggered from the start (total 3.5 seconds). Thanks again! – forestkelley Feb 10 '16 at 15:12
  • If this answered your question, please mark it as accepted (press the tick under the voting buttons) – Kaspar Lee Feb 10 '16 at 15:32