确保img div在视频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函数。这可以确保在发生任何其他事情之前加载图像

I wrote a blog post, how to do that。您可以按照博客中的说明将视频加载和其他功能放在onImgLoad函数中。这将确保您的图片加载并在视频开始前显示。