Question

我的CSS：

#midC {
    display: none;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */ 
}

我的JQuery：

$(document).ready(function() {
    $('#midC').load(function() {  
        $('#midC').fadeIn('slow');  
    });
});

HTML：

<img src="theImages/topLogo_temp.png" id=midC />

以上代码适用于CSS和IE＆gt; 9.无论如何使其工作低于版本9？有时会出现图像，有时不会出现在IE8上。

Answer 1

将load事件与图像一起使用有很多注意事项。来自jQuery docs：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

我在IE 8中看到的最常见的是最后一点，其中图像已经加载到浏览器缓存中。

Answer 2

在JavaScript中，window.onload事件在加载完所有图片后触发，因此，我认为您可以使用以下代替document

$(window).load(function() {
    $('#midC').fadeIn('slow');  
});

DEMO. 没有IE8来测试它，但它应该可以工作。

.fadeIn（）不会在小于9的IE版本中触发

2 个答案: