修改HTML元素，然后再使用Jquery或JS加載（或看到）

Question

我正在嘗試為特定頁面修改圖像的src，例如： http : //oasysgp.kevinmamaqi.com/marina/ 。

問題在於徽標會在原始徽標出現后立即更改。 我正在使用以下代碼：

jQuery(document).ready(function($){
    /* Cambiar el logotipo para las páginas de CPI */
    if( $('body').hasClass('page-id-18') || $('body').hasClass('page-id-445')) {
        $('#logo').attr("src","/wp-content/uploads/2016/07/oasispci.png");
    }
});

是否可以在之前加載其他圖像？

Answer 1

代碼的問題在於，在替換src之前，您將等待所有HTML加載， 包括img標簽 。

解決此問題的最簡單方法是不直接將圖像從服務器放入src ，然后開始在前端加載：

 jQuery(document).ready(function() { jQuery("img").each(function(i, el) { jQuery(el).attr("src", /*Real image here*/ "https://placeholdit.imgix.net/~text?txtsize=60&txt=SO&w=100&h=100"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> <img src="" /> 

Answer 2

總是在加載dom之后調用jQuery（document）.ready（）。

最好的方法是用CSS代碼實現它。 通過在中設置背景，而不是在圖片標簽中加載

CSS看起來像這樣

a.logo
{
    background: url('/wp-content/uploads/2016/07/logo-oasis.gif');
    display: inline-block;
    height: 56px !important;
    width: 223px  !important;
    margin-top: 24px  !important;
}

body.page-id-18 a.logo,  body.page-id-445 a.logo
{
    background: url('/wp-content/uploads/2016/07/oasisre.png') !important;
}

您徽標部分的HTML代碼是這樣的

<a href="http://oasysgp.kevinmamaqi.com/" class="logo">
</a>