Question

我使用以下逻辑加载具有后退默认图像的背景图像，以防第一张图像不可用。此图像是动态图像，它会将页面更改为页面，有时可能不存在。因此将显示默认值。这很好，逻辑按预期工作。

然而，对于第一次页面加载，浏览器显示默认图像几秒钟然后由于它的闪烁而加载实际图像。

有人可以告诉我如何避免闪烁并首先加载实际图像，然后在第一张图像不可用时加载默认图像

$(document).ready(function(){

        var imageUrl = 'https://res.cloudinary.com/ct-hero.jpg';
        var defaultImageUrl = './images/profile-hero-default.jpg';
        $(".hero-bg-video").css("background-image", 'url(' + imageUrl + '), url('+defaultImageUrl+')'); 
    })

Answer 1

您可以在JS中使用var tableDos = $('#exampleDos').DataTable( { "columns": [ { "data": "name" }, { "data": "gender" } ] } );。请查看以下代码。

JS

fadeIn

CSS

$(document).ready(function(){
    var imageUrl = 'https://res.cloudinary.com/openproperty/image/upload/q_auto/fox-hill-enfield-ct-hero.jpg';
        var defaultImageUrl ='https://www.fragrantnature.com/images/noimage.jpg';
        $.when($(".hero-bg-video").css("background-image", 'url(' + imageUrl + '), url('+defaultImageUrl+')')).done($(".hero-bg-video").fadeIn(4000)); 
    });

默认隐藏div。设置背景图像后，您可以淡入div以获得平滑动画。

这是fiddle

使用实际和后退图像加载背景图像时避免闪烁

1 个答案:

JS

CSS