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

问题描述：

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

我正在使用jQuery。

也许考虑隐藏你的图像元素（显示：无;等），直到图像加载成功。 – ToddBFisher

我想这就是应该做的事情？ :)之前显示/如果没有图像下载。 –

你是否预填充图像的宽度和高度？以前在IE中工作得很好，以避免页面在下载期间浮动。 – 2011-12-12 19:47:44

答

你可以 “预加载” 的形象，只有一次它的加载交换的src。

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

在浏览器下载图像时出现Alt标签。为了防止出现这种情况，您可以使用Xeon06建议的Image变量预加载所有“交换”图像。当需要使用鼠标悬停效果以便图像可以驻留在内存中时使用此功能。 –

预加载图像似乎对我很有用，虽然我的实现有点不同（我直接在页面上以“键”加载图像） – JoBu1324

答

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

答

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

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

不是我一直在寻找的东西，但是我会将你的答案标记为一样，因为它会起作用。 – JoBu1324

答

当你改变图像的源试试这个：

$('#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()在这种情况下。

+1如果我要“很好地”加载我的图像，这是解决方案我会执行。 – JoBu1324

答

如何：

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

哦，很多人忍着我......不应该在我的手机上回答。 –

答

与上述相类似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>，保存它在jQuery的alt属性缓存，删除该属性，然后加载图像。完成后，将alt设置回原来的状态，从缓存中提取值。

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

相关推荐