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

Question

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

jsfiddle 在这里：

每张图片都有临时的 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 class :

<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 占位符 class :

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

和一些 JavaScript 代码修改以删除 class :

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);
});

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

jQuery & CSS - temporary placeholder for image when they are different sizes

css

jquery

timeout

placeholder