jquery - 确保在视频 div 之前加载 img div

Question

我有一个页面，当您单击一组按钮中的一个时，图像会弹出，然后随着视频播放而淡出。问题是它在第一次点击时起作用，但在第二次点击时，带有图像的 div在视频加载后加载。如何确保它在视频开始加载之前出现？脚本（简化）是

$('li, .thumbs').on('click', function() {
    myVideo.load();
    myVideo.play();
    $('#myVid').bind("loadstart", function() {
        $('#MyT').fadeIn(0);
    });
    $('#myVid').bind("playing", function() {
        $('#MyT').fadeOut(500);
    });
});​

Answer 1

设置播放超时：

$('li, .thumbs').on('click', function() {
    setTimeout(function(){
        myVideo.load();
        myVideo.play();
    }, 200); // 200 ms, you can custom it as you wish.

    $('#myVid').bind("loadstart", function() {
        $('#MyT').fadeIn(0);
    });
    $('#myVid').bind("playing", function() {
        $('#MyT').fadeOut(500);
    });
});​

Answer 2

尝试对图像使用 onload 功能。这可确保在发生其他任何事情之前加载图像

我写了一篇博客文章，如何做到这一点。您可以将视频加载和其他功能放在 onImgLoad 函数中，如博客中所述。这将确保您的图像在视频开始之前加载并出现。