Question

我到目前为止的代码是：

var content = document.getElementById("show-deed");
content.style.display="none";

setTimeout(function(){
content.style.display="block";
}, 11000);

if (content.style.display == 'none') {
content.style.backgroundImage = "url('{{asset('/icons/black/upload-icon.svg')}}')";
           };

代码的前半部分正在工作，因为它隐藏了11秒的内容，虽然发生了这种情况，但我希望能够在11秒内显示单独的加载gif图像。

对此的任何帮助将不胜感激。

我也使用laravel / blade语法设置backgroundImage

Answer 1

问题出在这里（与“//”对齐）：

if (content.style.display == 'none') {
    // This makes no sense as you are setting an background image to an invisible div
    content.style.backgroundImage = "url('{{asset('/icons/black/upload-icon.svg')}}')";
};

我建议你创建另一个div，背景图片默认可见，11秒后隐藏该div并显示另一个div

var content = document.getElementById("show-deed");
var bgdiv = document.getElementById("image");
content.style.display="none";

setTimeout(function(){
    bgdiv.style.display="none";
    content.style.display="block";
}, 11000);

使用JS隐藏内容，同时显示加载gif 10秒

1 个答案: