1

我有以下 html 页面,它从文件中获取 url 并显示它们。调整图像大小以适应屏幕以避免滚动。我的问题是它在 Firefox 上正确显示,但 iceweasel 只显示一个空白页面。这让我很困惑,因为我没有在上面找到任何东西。谢谢您的帮助。

这些图像都有 400 的宽度和 400 的高度,但 iceweasal 声明第一张图像的宽度为 0 和高度为 19。如果我加载页面并刷新几次,页面将正确显示。

html页面:

<!DOCTYPE HTML>
<html>
<head><style>
.col-md-3 img {
    float:left;
}
body {
    margin:0px;
}
</style>
<script>    
var inRowLimit = 3;

function resizeImgs() {
    var images = document.querySelectorAll("img");
    var count = images.length;
    var rows = 1;
    if (count > inRowLimit) {
        rows = Math.ceil(count/3);
        count = inRowLimit;
    }
    var maxWidth = Math.floor(window.innerWidth/count);
    var maxHeight = window.innerHeight/rows;
    for(var i=0; i<=images.length; i++) {
        var currW = document.getElementById('img'+i).offsetWidth;
        var stretchW = maxWidth/currW;
        var currH  = document.getElementById('img'+i).offsetHeight;
        var stretchH = maxHeight/currH;
        if (stretchW <= stretchH)     
            document.getElementById('img'+i).style.width=currW*stretchW+'px';
         } else {
            document.getElementById('img'+i).style.height=currH*stretchH+'px';
        }           
      }
   }

function go() {
    <!--abstracted-->
    loadImgs(file);
}

function loadImgs(infile) {
    <!--abstracted-->
    resizeImgs();
}
window.onload = go
</script>
</head>
<body>
<div id="images">
</div>
</body>
</html>
4

1 回答 1

0

为什么不使用一些 css 来调整图像的大小?您可以将 css 用于图像: .col-md-3 img { display: block; 向左飘浮; 宽度:33.3333%;最大宽度:100%;高度:自动;据我了解你的问题 js 代码调整大小是完全没有必要的。

当浏览器没有完全下载图像时,运行代码似乎存在问题。您应该在触发窗口加载事件后执行您的代码。

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load

于 2014-03-18T09:32:36.627 回答