如何避免在替换图像时临时显示'alt‘

Question

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

我使用的是jQuery。

Answer 1

您可以“预加载”您的图像，只有当它被加载时，交换src。

var tmp = new Image();
tmp.src = "yourimage.png";
tmp.onload = function() {
    $("#actual_image").prop("src", tmp .src);
};

Answer 2

您可以在加载图像时暂时支持alt-text。如下所示：

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

Answer 3

当您更改图像的来源时，请尝试执行以下操作：

$('#image-id').fadeOut(250, function () {
    $(this).attr('src', 'new-source.jpg');
}).on('load', function () {
    $(this).fadeIn(250);
});

这将淡出图像，使其不可见，然后更改其源，当图像加载后，它将淡入。

这是一个演示：http://jsfiddle.net/xSkau/

请注意，.on()是jQuery 1.7中的新功能，与本例中的.bind()相同。