Question

我有以下代码，它应该加载带有背景图像的div，在封闭的div中加载一些文本，然后运行脚本来请求新文本并插入它而不是旧文本。问题是脚本在图像加载之前运行。脚本完成后，将进行替换并显示图像，但这不是我想要的顺序。我已经放入了窗口加载功能，并认为这会适当地延迟事情。也试过使用文件加载但同样的问题。我正在使用Safari。有什么帮助吗？

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8>
<style>
.picture {width:640px; height:480px; background-image:url(/users/me/desktop/sig.jpg);
 background-repeat:no-repeat;
background-position:center}
.words {position:absolute;width:320px; height:240px;padding:20px;border:10px;border-
color:red;border-style:solid;text-align:center; margin-left:140px;margin-top:110px}
</style>
<script src="/users/skronwith/desktop/jquery-1.10.2.min.js"></script>
<script>
$(window).load(function() {

var answer = prompt('what is input', ' ');
$('.words').text(answer); 
});
 </script>
</head>

<body>
<div class ="picture">
<div class ="words">

 this is in the second div  and should be there before the script runs

</div>
</div>

</body>
</html>

Answer 1

您可以使用setTimeout（）

试试这个

$(window).load(function() {
  setTimeout(function(){
    var answer = prompt('what is input', ' ');
    $('.words').text(answer); 
  },1000);
});

或者你可以在document.ready中使用它（当加载Dom时）

$(document).ready(function(){
  var answer = prompt('what is input', ' ');
    $('.words').text(answer);
  });
})

或者您可以尝试在"</body>"

之前添加脚本

Answer 2

在document.ready（）

中使用它

$(document).ready(function(){
  $('.words').text(answer); 
});

无法在jquery脚本之前加载背景图像

2 个答案: