加载图像后，parentNode 不会更新 .class答案

【问题标题】：parentNode won't update .class when image has loaded加载图像后，parentNode 不会更新 .class
【发布时间】：2014-03-24 21:58:00
【问题描述】：

我正在使用 wordpress，并拥有来自 http://www.barrelny.com/blog/taking-control-of-imageloading/ 的以下代码，该代码在加载图像时添加了一个“css 加载器”，然后添加了一个“.loaded”类并在完成加载时淡入。

这是使用的代码

<div class="img_wrapper">

    <div class="css_spinner">
        <div class="half left">
            <div class="band"></div>
        </div>
        <div class="half right">
            <div class="band"></div>
        </div>
    </div>

<img src="http://www.drummerworld.com/pics/drum43/ElvinJones_LeeTanner.jpg" alt="Elvin Jones" onload="imgLoaded(this)"/>
</div>

jquery（放在标题中）：

<script type='text/javascript'>

 function imgLoaded(img){
 var imgWrapper = img.parentNode;

 imgWrapper.className += imgWrapper.className ? ' loaded' : 'loaded';
 };

</script>

和 css：（没有 css 微调器）

.img_wrapper{
border: 1px solid red;
position: relative;
width: 625px;
height: 420px;
overflow: hidden;
}

.img_wrapper img{
position: absolute;
top: 0;
width: 625px;
opacity: 0;

-webkit-transition: opacity 150ms;
-moz-transition: opacity 150ms;
-ms-transition: opacity 150ms;
transition: opacity 150ms;
}

.img_wrapper.loaded img{
opacity: 1;
}

现在的问题是，如果我想把这个 html 标记放在这样的 wordpress 循环中

<div class="img_wrapper">

    <div class="css_spinner">
        <div class="half left">
            <div class="band"></div>
        </div>
        <div class="half right">
            <div class="band"></div>
        </div>
    </div>

  <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>
  <img src="<?php echo $url ?>" />

</div>

（请注意我在 custom.js 中添加了一个 attr 代码）

    $("img").attr({onload:"imgLoaded(this)"});

加载的类没有在 .img_wrapper 中更新。

那么，我做错了什么？我已经尝试克服这个问题已经有一段时间了，但我被困住了。

任何帮助将不胜感激

【问题讨论】：

如果你能像 $("#someIdForImage").attr({onload:"imgLoaded(this)"}); 那样指定img 就好了。

标签： javascript wordpress parent attr classname

【解决方案1】：

先改成（因为你用的是jquery，注意这个要在包含jquery lib之后加上）：

<script type='text/javascript'>

 function imgLoaded(img){
    img.parent().addClass('loaded');
 };

</script>

其次，您应该将此代码包装在准备好的文档中：

$(function() {
    $("img").attr({onload:"imgLoaded(this)"});
});

这样，一旦所有节点都添加到 dom 树，您将触发该功能。如果您使用准备好的外部文档，那么它不会有任何效果，因为在执行该代码时 $("img") 将是空的（请记住，您将其放在

部分中）

你也可以放

<script> 
$("img").attr({onload:"imgLoaded(this)"});
</script>

在关闭标签之前（确保整个页面被渲染）。

【讨论】：