2016-10-22 66 views
-1
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <img id="image" src="penguins.jpg"/> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/load.js"></script> 
</body> 
</html> 

load.js 這是行不通的

$('#image').load(function(){ 
    alert('Ready'); 
}); 

load.js 這工作

$(document).ready(function(){ 
    alert('Ready'); 
}); 

我想首先加載圖像,然後警告框彈出。

+1

這不是['load'(http://api.jquery.com/load/)方法做什麼? – Li357

回答

0

將您的<script type="text/javascript" src="js/jquery.js"></script>標籤關於<img>標籤。因爲在圖片加載時,jQuery將不會被加載。

您需要有一個timeout才能實現此目的,因爲alert會凍結網頁的活動並希望用戶關注該對話框。所以,它在調用時不會渲染圖像。要解決這個問題,請在超時後調用警報。

$('#image').load(function() { 
 
    setTimeout(function() { 
 
    alert('Ready'); 
 
    }, 100) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="http://unsplash.it/200/300/" /> 
 
</body> 
 

 
</html>