javascript - 使用 Jquery .load() 仅指定回调无法正常工作

Question

我有一个带有视频的 div，我正在通过修改事件的 src 属性来更改该视频，然后加载该 div 来播放视频。这一切都运行得很好。

html

<div id="screen">
    <video autoplay loop>
        <source id="vid_source" src=""  type="video/mp4">
    </video>
</div>

jquery

if (index == 3) {
    vidSrc = "video.mp4";
    $("#vid_source").attr("src", vidSrc);
    $("video").load();
    $("#screen").fadeIn();
}

我想做的是将 $("#screen").fadeIn(); 添加到加载函数的回调中。当我更新代码来执行此操作时:

$("video").load(function() {
    $("#screen").fadeIn();
});

尽管源属性已正确更新，但由于某种原因，回调未触发。有什么想法吗？

谢谢。

Answer 1

请阅读this

Caveats of the load event when used with images ( same applies to videos )

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• 它无法一致且可靠地跨浏览器工作

• 如果图像 src 设置为与之前相同的源代码

• 它没有正确地在 DOM 树中冒泡可以停止触发

• 对于已存在于浏览器缓存中的图像

解决方案:

我建议尝试这个:

$("video").on("load",function() {
    $("#screen").fadeIn();
});