javascript - 图像加载检查并不总是有效

Question

图像加载后，我将应用以下代码:

if ($('.fadein-page-banner') != null) {
$('.fadein-page-banner img').one("load", function() { 
    $('#video-loading-icon').css('opacity', 0);
    $('.fadein-page-banner-wrapper').addClass('fadeout-behind');
    $('.fadein-page-banner').addClass('fade-in-out'); 
});

}

这是 html/php

<div class="fadein-page-banner">
    <span class="block"><?php echo get_post_meta($post->ID, 'fade_in_line_1', true); ?></span>
    <span class="block"><?php echo get_post_meta($post->ID, 'fade_in_line_2', true); ?></span>
    <?php the_post_thumbnail(); ?>
</div>

缩略图是我正在等待加载的图像。请注意，即使我使用的是一个类，我也只针对那一张图像。基本上，页面加载后，巨大的图像就会淡入淡出。我试图让该图像等到加载后才开始淡入淡出过程。

但是，它并不总是有效，尤其是当我单击页面链接时。我尝试清除缓存。有什么想法我可能做错了吗？我尝试删除 if 条件，并使用“on”而不是“one”。经过多次刷新后它最终可以工作(我也尝试过等待)。有没有办法我可以设置 300 毫秒的超时来继续检查负载，当加载时，执行代码，否则再次执行该函数？

Answer 1

if ($('.fadein-page-banner') != null) {
    $('.fadein-page-banner img').one("load", function() {
        if (this.complete) {
            $('#video-loading-icon').css('opacity', 0);
            $('.fadein-page-banner-wrapper').addClass('fadeout-behind');
            $('.fadein-page-banner').addClass('fade-in-out');
        }
    });
}