我有以下 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>