检查旗帜加载

嗨，我有下面的代码检查旗帜加载

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    font-family: Arial, serif; 
 
    color: #003C78; 
 
} 
 

 
a { 
 
    color: #003C78; 
 
} 
 

 
.banner-wrap { 
 
    display: flex; 
 
    width: 728px; 
 
    height: 90px; 
 
} 
 

 
.page-container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.page-container img { 
 
    width: 100% 
 
} 
 

 
.image-wrapper, 
 
.text-wrapper { 
 
    position: absolute; 
 
    height: auto; 
 
    width: 411px; 
 
} 
 

 
.image-wrapper { 
 
    top: 0; 
 
    right: -155px; 
 
    z-index: 2; 
 
    animation: slideLeft 14.5s infinite ease 0s normal forwards; 
 
} 
 

 
.image-wrapper img { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: -100px; 
 
    width: 150% 
 
} 
 

 
.text-wrapper h1, 
 
.text-wrapper h2 { 
 
    position: absolute; 
 
    left: 90px; 
 
    padding: 0; 
 
    opacity: 0; 
 
    z-index: 3; 
 
    font-size: 1.3em; 
 
} 
 

 
.text-wrapper h1 { 
 
    animation: fade infinite 14.5s linear 0s normal forwards; 
 
    animation-delay: 4s; 
 
    top: 15px; 
 
} 
 

 
.text-wrapper h2 { 
 
    animation: fadeNew infinite 14.5s linear 0s normal forwards; 
 
    animation-delay: 7.8s; 
 
} 
 

 
.text-wrapper img { 
 
    position: absolute; 
 
    left: 50px; 
 
    bottom: 30px; 
 
    width: 468px; 
 
    height: 180px 
 
} 
 

 
.red-wrapper { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    z-index: 9; 
 
    right: -600px; 
 
    color: #fff; 
 
    animation: slideLeftNew 14.5s infinite ease 0s normal forwards; 
 
    animation-delay: 7s; 
 
    padding-left: 15px; 
 
    border-bottom: 100px solid #E6000A; 
 
    border-right: 50px solid transparent; 
 
    height: 0; 
 
    width: 120px; 
 
} 
 

 
.red-wrapper h3 { 
 
    font-size: 1.1em; 
 
    font-weight: 300; 
 
    margin-top: 26px; 
 
} 
 

 
.logo img { 
 
    width: 80px; 
 
    height: auto; 
 
    margin: 17px; 
 
} 
 

 
img.kitchen { 
 
    transform: translateY(-40%); 
 
    -webkit-transform: translateY(-40%); 
 
    -ms-transform: translateY(-40%); 
 
    width: 63%; 
 
    position: absolute; 
 
    left: -18px; 
 
    animation: moveUp 14.5s infinite ease 0s normal forwards; 
 
} 
 

 
img.wall { 
 
    width: 11%; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 9; 
 
} 
 

 
@keyframes slideLeft { 
 
    20.95% { 
 
    right: -155px 
 
    } 
 
    85%, 
 
    27.19% { 
 
    right: 135px; 
 
    } 
 
} 
 

 
@keyframes slideLeftNew { 
 
    15.95% { 
 
    right: -220px 
 
    } 
 
    20.19%, 
 
    37% { 
 
    right: 0 
 
    } 
 
    42% { 
 
    right: -220px; 
 
    } 
 
} 
 

 
@keyframes fade { 
 
    0% { 
 
    opacity: 0 
 
    } 
 
    23%, 
 
    14.38% { 
 
    opacity: 1 
 
    } 
 
    26% { 
 
    opacity: 0 
 
    } 
 
} 
 

 
@keyframes fadeNew { 
 
    0% { 
 
    opacity: 0 
 
    } 
 
    30%, 
 
    14.38% { 
 
    opacity: 1 
 
    } 
 
    33% { 
 
    opacity: 0 
 
    } 
 
} 
 

 
@keyframes moveUp { 
 
    0% { 
 
    transform: translateY(-40%); 
 
    } 
 
    50% { 
 
    transform: translateY(-45%); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Hawa Sliding Solutions</title> 
 
    <meta content="text/html;charset=UTF-8" http-equiv="content-type"> 
 
</head> 
 

 
<body> 
 

 
    <a href="http://hawa-suono.com/" target="_blank"> 
 
    <div class="banner-wrap"> 
 
     <div class="logo"><img src="logo.png"></div> 
 
     <div class="page-container"> 
 
     <div class="text-wrapper"> 
 
      <h1>Den Alltag auf stumm schalten.</h1> 
 
      <h2>Hawa Suono – die schalldichte Lösung.</h2> 
 
     </div> 
 
     <img class="wall" src="wall.png" /> 
 
     <img class="kitchen" src="kitchen3.jpg" /> 
 
     <div class="image-wrapper"><img src="tuer2.jpg" /></div> 
 
     <div class="red-wrapper"> 
 
      <h3>Jetzt die Weltneuheit entdecken.</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</body> 
 

 
</html>

现在，我需要检查，如果旗帜被加载和工作，如果它不是一个定制的旗帜，那么我需要把另一个图像，而不是横幅。我尝试了很多东西，检查图像是否存在，检查是否加载了css，检查是否加载了文档，但该解决方案无法工作，因为我只能检查横幅是否加载，而不是整个文档。所以现在，我被堆叠起来，不知道下一步该怎么做。另外，我不能使用jquery，只能使用纯javascript。有什么帮助吗？感谢

来源

2017-10-12 Marko Petković

哪个图像横幅？它是'logo.png'吗？ – Chris

一切都是横幅。所有这三个图像都制作了一个动画横幅。 –

你可以使用jQuery

//check all images on the page 
$('img').each(function(){ 
    var img = new Image(); 
    img.onload = function() { 
     console.log($(this).attr('src') + ' - done!'); 
    } 
    img.src = $(this).attr('src'); 
});

工作拨弄做到这一点：http://jsfiddle.net/kalmarsh80/nrAPk/

来源

2017-10-12 07:34:32

参考：https：//stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript –

投票了，我唯一能看到的是，最后一张照片是因为src属性已经存在（这里是ALERT），但是加载需要更多的时间。对于小图片来说，这不是问题，但是对于较大的图片，您可以在所有图片加载之前得到响应FINISH。 – BatOOn

感谢您的回答，但我无法使用jquery（客户需求）。 –

如果使用JS，

function imgError(image) { 
    image.onerror = ""; 
    image.src = "/images/wall.gif"; 
    return true; 
} 

<img src="wall.png" onerror="imgError(this);"/>

没有JS，

<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />

来源

2017-10-12 07:41:03 Hash

这是一个好的开始。但不知何故，如果每幅图像都加载在横幅中，我必须确定它们，如果它们不是那么用一幅大图像替换整幅横幅。 –

因此，如果一张图像丢失，您仍然会取代一个大的图像？ – Hash

是的，这就是客户想要的。如果缺少四个图像中的一个，则将整个横幅（文本和所有内容都替换为一个大图像）替换。 –

检查旗帜加载

回答

相关问题