2016-11-06 85 views
1

我想在頁面加載時通過javascript在後臺填充圖像。我嘗試了下面的代碼片段 - 我嘗試在Chrome本地以及本地主機上運行它,但它在Firefox,Safari和所有其他瀏覽器中都不顯示圖像。Javascript只能在Chrome瀏覽器中工作,但不能使用其他瀏覽器

var body = document.body, 
    html = document.documentElement; 

var height = Math.floor(Math.min(body.scrollHeight)); 
for(i=0; i<height; i++){ 
    var images = [], 
    index = 0; 
    images[0] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[2] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[3] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg'>"; 

    images[4] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[5] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[6] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[7] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[8] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[9] = "<img id='rel' src='http://ia.media-imdb.com/images/M/MV5BMTAzZmJiOGQt[email protected]._V1_SX300.jpg'>"; 

    images[10] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[11] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[12] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

    images[13] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    images[14] = "<img id='rel2' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

    index = Math.round(Math.random() * images.length); 

    document.write(images[index]); 
} 

和HTML:

<body> 
    <div id="continer"> 
    <script type="text/javascript" src="images.js"></script> 
    </div> 
+0

控制檯中的任何錯誤? – vlaz

+0

@adeneo ...顯然,當我沒有看到它在那裏。即使我複製並粘貼它...它仍然是錯誤的 - 它可以返回大於最大索引的索引。 – vlaz

+0

@vlaz - 是的,它可以,正確的方法確實是'Math.floor' – adeneo

回答

0

在Firefox和其他一些瀏覽器,滾動條不附接到所述主體,但documentElement<html>標籤。

你要檢查哪一個真正有scrollHeight

var body = document.body, 
    html = document.documentElement; 

var bodyHeight = Math.floor(Math.min(body.scrollHeight)); 
var htmlHeight = Math.floor(Math.min(html.scrollHeight)); 

var height = Math.max(bodyHeight, htmlHeight); 

for(i=0; i<height; i++){ ... 
0

因爲你的代碼指的是身體和頁面的視覺元素,你需要在頁面加載後執行腳本。我修改了你的代碼,現在可以在Chrome,IE和FF中使用。

最重要的更改是從onLoad()事件運行腳本。

<body onload="showImages();"> 

注意爲了簡潔起見,我在這裏剪出大量圖像數組插入。

<html> 
<head> 
</head> 
<script> 
function showImages() { 
var body = document.body, 
    html = document.documentElement; 

var height = Math.floor(Math.min(body.scrollHeight)); 
for(i=0; i<height; i++){ 
var images = [], 
index = 0; 
images[0] = "<img id='rel' src='http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg'>"; 

images[1] = "<img id='rel1' src='http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'>"; 

// ... 

index = Math.round(Math.random() * images.length); 

document.write(images[index]); 

} 
} 
</script> 
<body onload="showImages();"> 
<div id="continer">`` 

</div> 
相關問題