Question

在显示数据时，我正在使用此代码将图像置于结果div中的缩略图字段中：

<div class='result'>
    <div class='date_field'>15 Okt</div>
    <div class='thumbnail_field th_div'><img src='p.png' class='thumb'></div>
    <div class='content_field'><a href="p.html">p</a></div>
    <div class='price_field'>5</div>
</div>

.result{position: relative;background-color: white;height: 100px;overflow: hidden;margin: 0px 10px;}
.thumbnail_field{position: absolute;top: 8;left: 15%;width: 100px;height: 75px;background-color: #FFF;}
.th_div img{position: absolute;}

$(document).ready(function(){
var h = 75;
var w = 100;
$('.thumb').each(function(){
    $(this).load(function() {
        var width=$(this).width();
        var height=$(this).height();
        var ratio=width/height;
        var pwidth=$(this).parent().width();
        var pheight=$(this).parent().height();
        var newheight;
        var topmargin;
        var newwidth;
        var leftmargin;

        if(width/height>=4/3){
            $(this).css("width",w);
            newheight=w/ratio;
            topmargin=(h-newheight)/2;
            $(this).css("top",topmargin+"px")
        }else{
            $(this).css("height",h);
            newwidth=h*ratio;
            leftmargin=(w-newwidth)/2;
            $(this).css("left",leftmargin+"px")
        }

    });
});
});

它适用于Chrome和Firefox，但在IE 8中随机工作。任何有关可能原因的提示？

Answer 1

尝试使用innerWidth()和innerHeight代替

width() and height()

Answer 2

这可能是$ .load函数的缓存问题。

如果您的浏览器缓存中尚未显示图像，则会触发加载功能的回调。如果图像存在于缓存中，则不执行图像加载函数回调 - 这解释了IE8上代码的不稳定行为。

有关此处的更多信息：jQuery .load() problem in all IE versions

此警告还列在jQuery .load()说明页面中：http://api.jquery.com/load-event/

解决方案：

$(".thumb").one("load",function(){
// Add your positioning code here
})
.each(function(){
if(this.complete) $(this).trigger("load");
});

干杯！

使用jquery文档就绪函数在绝对div中居中图像在IE 8中随机工作

2 个答案: