jQuery 和 CSS - 图像大小不同时的临时占位符

Question

我正在尝试构建一个图片库，在其中显示一个临时图片(一颗心)1 秒来代替实际图片(图片 1、图片 2 等)。

jsfiddle 在这里:

https://jsfiddle.net/tgzqLmma/

每个图像都有临时的 heart img 作为它的 src 和真实图像存储在 data-src 中，如下所示:

<div>
    <img class="delay" src="http://s12.postimg.org/4toxdafhl/heart.png" 
    data-src="http://placehold.it/260x280/E8117F/FFFFFF?text=image+1" alt=""     
    style="padding-top:120px; padding-bottom:120px"/>
</div>

我使用填充顶部和底部(将根据图像高度在服务器端动态定义)使容器内的 heart img 垂直居中。

然后在 jQuery 中，我删除了填充，并在 1 秒后为每个图像切换 src 和 data-src 值:

jQuery( document ).ready(function() {
    setTimeout(function () {
       jQuery('.delay').each(function () {
          var imagex = jQuery(this);
          var imgOriginal = imagex.data('src');
          jQuery(imagex).removeClass('delay');
          jQuery(imagex).css('padding',0);
          jQuery(imagex).attr('src', imgOriginal);
        });
     }, 1000);
});

我使用媒体查询和 css 来调整主要图像和容器的大小。

我的问题是我需要心脏图像保持在 40x40 像素，但是 1 秒后出现的主图像是正确的大小。目前在我的 jsfiddle 中你可以看到前两张图片正在扩展心脏图片，但我希望它看起来像第三张图片(我故意没有切换那个)

我知道这是因为我在我的 css 中设置了 width 和 max-width 但我可以更改代码以允许这样做吗？

Answer 1

您可以将占位符放置在图像的 background 中，而不是将占位符放置在图像源本身中，这样也可以节省一些代码。 See this fiddle

只需在图像中添加一个 .placeholder 类即可:

<img class="delay placeholder" src="" data-src="http://placehold.it/260x280/E8117F/FFFFFF?text=image+1" alt="" style="padding-top:120px; padding-bottom:120px"/>

然后是占位符类的 CSS:

div img.placeholder{
    background:url('http://s12.postimg.org/4toxdafhl/heart.png') center center no-repeat;
    display:block;
}

还有一些 JavaScript 代码修改以删除该类:

jQuery( document ).ready(function() {
    setTimeout(function () {
       jQuery('.delay').each(function () {
          var imagex = jQuery(this);
          var imgOriginal = imagex.data('src');
            jQuery(imagex).css('padding',0);
            jQuery(imagex).attr('src', imgOriginal);
            jQuery(imagex).removeClass('placeholder'); /*added this*/
       });
    }, 1000);
});