jQuery-使某个图像类不受延迟加载的影响

Question

我有一个懒惰的加载插件，似乎针对我页面上的所有图像。所以当我向下滚动时，图像才会显示出来。

我的问题是我的图像在点击时会发生变化。更具体地说，当点击“投票”图像时，它将被完全相同位置（并且具有相同尺寸）的不同“投票”图像替换。

当显示新的“已投票”图像时，即使它出现在同一位置，它最初也不会显示。只有在您滚动页面（任何方向）时才会出现。

我想知道是否有办法避免这种情况？我希望图像能够立即显示而无需滚动。我想在“投票”按钮中添加一个类或id，以确保延迟加载插件忽略它。

• 我没有关于延迟加载插件的细节，因为我不确定它是如何实际工作的，因为它包含在我正在使用的模板中。虽然我怀疑它的目标是img标签。

Answer 1

您可以使用CSS sprites来解决此问题，而不是摆弄延迟加载。

CSS精灵的基本思想是显示同一图像的不同部分而不是多个不同的图像。

Answer 2

我解决了我在这里遇到的问题。

解决方案在这里：

$('img.lazy:not(.notlazy)')

如图所示：here

Answer 3

根据documentation，最好为延迟加载的图像提供特定的类。这样您就可以轻松控制插件绑定到哪个图像。例如：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

然后在你的代码中执行：

$("img.lazy").lazyload();

由于Lazy Load是jQuery插件，因此您可以使用any jQuery selector。