html5 - 为什么加上preload之后window.load会变慢？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

怪我咯 2017-04-17 11:03:16

[HTML讨论组]

411

代码如下:

<!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"之后反而延时输出。

怪我咯

走同样的路，发现不同的人生

全部回复(2)

阿神2017-04-17 11:05:16 2楼

当所有 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>

赞 +0

添加回复

黄舟2017-04-17 11:05:16 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>