Question

<!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');
});

我想首先加载图像，然后弹出警告框。

Answer 1

将<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>

$（＆＃39;＃标识＆＃39）。负载（函数（）{}）;不工作

1 个答案: