Question

我有一点疑问，希望有人可以帮助我。

我正在使用Unveil（由Luis Almeida）jquery插件来延迟加载图片。它很容易实现，一切都按预期工作（或多或少）。但是，根据文档，有一种方法可以在加载图像时（或者至少是我所理解的）对CSS应用一个很酷的轻松过渡。

HTML看起来像这样

<div class="col-xs-12 workImage">
        <img src="images/spinner.gif" data-src="pictures/pic3.jpg" class="img-responsive" alt="" />
</div>

我有这段代码

$(function() {
        $('.workImage').find('img').unveil(-300, function() {
            $(this).css( { 'opacity': 1} );
        });
});

和这个CSS

.workImage img{
  opacity: 0;
  transition: opacity .5s ease-in;
}

问题在于，使用此代码，效果将应用于整个<img>标记，包含微调器，而不是仅到我们想要显示的图像一旦加载。不确定你是否知道我的意思。

当我进入页面时，unveil应用效果并且旋转器显示具有酷炫的CSS效果并开始旋转直到图片被加载，当发生这种情况时它只会触发图像但是没有任何影响（因为发生在<img>标签上）。

文档说明你可以指定一个回调函数，该函数将在图像被“揭开”后触发。而且我不确定我是否正确使用它。任何人都可以用这个来捏这个吗？

以下是Unveil网页，您可以在其中阅读使用和文档：

非常感谢提前