檢查旗幟加載

嗨，我有下面的代碼檢查旗幟加載

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

是的，這就是客戶想要的。如果缺少四個圖像中的一個，則將整個橫幅（文本和所有內容都替換爲一個大圖像）替換。 –

檢查旗幟加載

回答

相關問題