2016-10-22 2 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 dies nicht funktioniert

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

load.js Dies funktioniert

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

ich das Bild zuerst, dann die Warnfeld Aufspringen laden möchten.

+1

Das ist nicht das, was die [ 'load'] (http://api.jquery.com/load/) Methode macht ... – Li357

Antwort

0

Platzieren Sie Ihren Tag <script type="text/javascript" src="js/jquery.js"></script> über den Tag <img>. Weil zum Zeitpunkt der Bilder geladen wurde, wird jQuery nicht geladen.

Sie benötigen eine timeout, um dies zu erreichen, weil alert die Aktivität der Webseite einfrieren und den Benutzer den Dialog fokussieren soll. So wird das Bild nicht gerendert, wenn es aufgerufen wird. Um dies zu beheben, rufen Sie die Warnung nach einer Zeitüberschreitung auf.

$('#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>