Question

我正在使用wordpress并从http://www.barrelny.com/blog/taking-control-of-imageloading/获得以下代码，在加载图像时添加'css loader'然后添加'.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>

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

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

加载的类未在.img_wrapper中更新。

那么，我做错了什么？我一直试图克服这个问题很长一段时间但是我被卡住了。

任何帮助将不胜感激

Answer 1

首先更改为（因为您正在使用jquery，请注意这应该在包含jquery lib之后添加）：

<script type='text/javascript'>

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

</script>

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

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

这样，一旦将所有节点添加到dom树，您将触发功能。如果您使用了外部文档，那么它将没有任何效果，因为$（“img”）在执行该代码时将为空（请记住您将其放在＆lt; head＆gt;部分中）

你也可以把

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

关闭之前＆lt; / body＆gt;标签（以确保整个页面被渲染）。

在加载图像时，parentNode不会更新.class

1 个答案: