Question

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

图像都具有宽度400和高度400但是冰系状态表示第一张图像的宽度为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>

Answer 1

为什么不使用某些CSS来调整图像大小？您可以将css用于图像： .col-md-3 img { 显示：块; 向左飘浮; 宽度：33.3333％; 最大宽度：100％; 身高：自动; } 至于我解释你的问题js代码调整大小是完全没必要的。

当浏览器没有正式下载图像时，似乎存在运行代码的问题。您应该在窗口加载evenet被触发后执行您的代码。

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

HTML页面在其他浏览器上无法正确显示

1 个答案: