修改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>