更新

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

一般情况下，你可以尝试这种方式：

<强> HTML

<img src="" alt="loading ...">

<强> JS

var img = new Image();
img.src = 'https://dummyimage.com/600x400/000/fff';
img.onload = function() {
    $('img').attr('src', 'https://dummyimage.com/1000x1000/000/fff');
}

jsfiddle

更新

您可以使用以下内容来实现延迟加载

<强> HTML

<img src="" data-src="https://dummyimage.com/1000x1000/000/fff" alt="loading ...">
<img src="" data-src="https://dummyimage.com/1000x1000/900/fff" alt="loading ...">
<img src="" data-src="https://dummyimage.com/1000x1000/090/fff" alt="loading ...">
<img src="" data-src="https://dummyimage.com/1000x1000/009/fff" alt="loading ...">

<强> JS

$('img').each(function() {
    var img = new Image(),
        $this = $(this),
        src = $this.data('src');

    img.src = src;
    img.onload = function() {
        $this.attr('src', src);
    }
});

jsfiddle

Answer 2

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');
        }
    });
}

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

2 个答案:

更新