有没有办法隐藏卸载的延迟加载图像的 alt 标签？

Question

我正在使用 jQuery Lazyload plugin，目前将 img 标签留空，因为当图像尚未加载时，图像 alt 标签文本是可见的。

我需要找到一种在图像未加载时不显示 alt 标记文本的方法。从我在浏览插件页面时看到的情况来看，似乎没有办法在加载图像后触发回调函数。我考虑过尝试隐藏 img 元素，然后在加载图像后再次显示它，但无法弄清楚如何在没有某种回调的情况下使它工作。

有没有一种简单的方法可以在图片尚未加载时隐藏替代文字？谢谢！

Answer 1

隐藏替代文字 css:

img {
color: transparent;
}

图片加载后做一些事情：

$("img").on("load", function(){
 console.log("loaded!")
});

Answer 2

最好加载透明图片1px x 1px png。这使您的 HTML 有效并防止替代文本或替代文本边框出现重影。

Answer 3

在图像出现之前，下面将阻止显示损坏的图像图标和 Alt 标签中的文本。您不想使用 Alt=""，因为它对 google SEO 不利立场。 'visibility: hidden' 优于 'disply: none'，因为它会破坏页面。

<style>
    img:not([src]) {
        visibility: hidden;
    }
</style>

Is there a way to hide alt tags for unloaded lazyload images?