为什么加上preload之后window.load会变慢？

代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #video {
        width: 300px;
        height: 300px;
    }
    </style>
</head>
<body>
    <video id="video" class=""  
         controls preload="none"
         poster="test.jpg"  
         >  
        <source src="test.mp4" type='video/mp4' />  
        <source src="test.webm" type='video/webm' />  
        <source src="test.ogv" type='video/ogg' />  
       </video>
<script>
    window.addEventListener('load', function() {
        console.log('===load====');
    }, false);
</script>
</body>
</html>

如果不加preload控制台会立刻打印输出，加上preload="none"之后反而延时输出。

当所有 objects (images, video, auduo, JavaScript文件) 被下载后，Window.load 被触发. 把preload设置成none, 也就是说video不被预先下载。这样Window.load就会等到video Timeout以后，才会触发。
$(document).ready() 要比 Window.load早，为当DOM成功加载后. 你应该用下面代码来Debug.

<script>
    $(document).ready(function() {
        console.log('===load====');
    });
</script>

别用 'preload="none"'，这个html5特性在IE和火狐里都没有很好的支持。

【热门文章】