javascript - 如何避免替换图片时临时显示 'alt'

Question

我正在构建一个动态加载内容的网站，根据内容的结果替换图像。然而，当浏览器加载图像时，alt 属性通常会以一种难看的方式显示。如果可能的话，我想保留 alt 属性，但在浏览器下载图像时，图像应该显示而不会闪烁“alt”属性。有人遇到过这个问题并找到解决方案吗？

我正在使用 jQuery。

Answer 1

您可以在加载图像时暂时支持替代文本。像这样的事情:

$(function ()
{
    var ATTR = 'alt';

    $('img').each(function ()
    {
        var $this = $(this);
        $this.data(ATTR, $this.prop(ATTR)).removeProp(ATTR);
    }).load(function ()
    {
        var $this = $(this);
        $this.prop(ATTR, $this.data(ATTR);
    });
});

<小时/>

重构版本:

$(function ()
{
    var ATTR = 'alt';

    function disableAlt()
    {
        var $this = $(this);
        $this.data(ATTR, $this.prop(ATTR)).removeProp(ATTR);
    }

    function enableAlt()
    {
        var $this = $(this);
        $this.prop(ATTR, $this.data(ATTR);
    }

    $('img').each(disableAlt).load(enableAlt);
});