I have the following html page which takes urls from a file and display them. The images are resized to fit the screen to avoid the need to scroll. My problem is it is displayed correctly on firefox but iceweasel just display an empty page. This got me really confused because I did not find anything on it. Thank you for your help.
The images all have a Width 400 and Height 400 but iceweasal states the first image has Width 0 and Heigth 19. If I load the page and refresh it a few times the page is displayed correctly.
The html page:
<!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>
