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

Answer 2

您可以“预加载”您的图片，只有在加载后才能交换src。

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

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()相同。

Answer 4

您可以在数据属性中存储alt，然后在加载图像后将alt属性添加到图像。

Answer 5

这个怎么样：

var alt = $('#myimg').attr('alt');
$('#myimg').attr('alt', '');
$('#myimg').load(function () {
    $(this).attr('alt', alt);
});

Answer 6

类似于MДΓΓБДLL上面的答案，但更多jQueryish：

$('img').each(function() {
    var $this = $(this); 
    $this.data("alt", $this.attr("alt")).removeAttr("alt");
}).load(function() {
    var $this = $(this);
    $this.attr($this.data("alt")); 
});

这样做非常简单：对于每个<img>，将它的alt属性存储在jQuery的缓存中，删除属性，然后加载图像。完成后，将alt设置回原来的状态，从缓存中提取值。

如何在替换图像时避免临时显示“alt”

6 个答案: