有没有办法检测页面何时完成加载,即所有内容,javascript和资产,如CSS和图像？
所以喜欢:
if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}
此外,如果页面加载时间超过1分钟,则执行其他操作,例如:
if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}
我已经看到像Apple的MobileMe这样的网站做了类似的检查但是却无法在他们庞大的代码库中找到它.
有人可以帮忙吗？
谢谢
编辑:这基本上是我想要做的:
// hide content
$("#hide").hide();
// hide loading
$("#loading").hide();
// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);
jQuery(window).load(function() {
$("#hide").fadeIn();
$("#loading").fadeOut(function() {
$(this).remove();
clearInterval(loadingAnim);
});
setTimeout(function() {
$("#error").fadeIn();
}, 60000);
});
我有一组动态生成的复选框,其中每个复选框都有一个data-id对应于数据库整数id 的属性.当我用我要编辑的对象填充我的html表单时,会有一个整数列表,表示应该检查哪些复选框.复选框包含在divwith类中checkbox-wrapper.
所以html看起来像这样:
<div class="checkbox-wrapper">
<input type="checkbox" id="checkbox1" data-id="1">
<label for="checkbox1">Checkbox 1</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="checkbox2" data-id="2">
<label for="checkbox2">Checkbox 2</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="checkbox3" data-id="99">
<label for="checkbox3">Checkbox 99</label>
</div>
请注意,id在自动增量索引号上运行,而data-id可能具有不同的id值.我想通过data-id选择它们.
现在,使用JQuery,我知道我可以选择相关的复选框,如下所示:
$(".checkbox-wrapper>input[data-id='99']");
$(".checkbox-wrapper>input[data-id='1']");
这在我的控制台中以chrome运行,它返回相关的DOM元素.同样,在下面,将复选框设置为选中:
$(".checkbox-wrapper>input[data-id='99']").prop("checked", "checked");
$(".checkbox-wrapper>input[data-id='1']").prop("checked", "checked");
但是,如果我在我的javascript代码中迭代整数列表(而不是直接在控制台中),并根据id值记录返回的元素,我会得到一些奇怪的结果:
var ids = [1,2]
$.each(ids, function(index, myID){
console.log($(".checkbox-wrapper>input[data-id='"+myID+"']"));
$(".checkbox-wrapper>input[data-id='"+myID+"']").prop("checked", "checked");
});
首先,没有选中复选框.其次,我的控制台打印出奇怪的结果
n.fn.init[0]
context: document
length: 0
prevObject: n.fn.init[1]
selector: ".checkbox-wrapper>input[data-id='1']"
__proto__: n[0]
n.fn.init[0]
context: document
length: 0
prevObject: n.fn.init[1]
selector: …我有一个问题.我的一个JS脚本需要首先加载Facebook SDK和Twitter小部件JS.Facebook创建FB对象,Twitter创建twttr对象.它们都会在我的脚本触发后创建这些对象,即使它们是从中加载的<head>.
我认为解决方案是定期检查是否定义了FB和twttr,然后继续执行我的脚本.但我不知道该怎么做.
我尝试创建一个循环
while (typeof FB === 'undefined' || typeof twttr === 'undefined' || typeof twttr.widgets === 'undefined') {
// run timeout for 100 ms with noop inside
}
但这显然不起作用,因为它一直高速发射超时并且页面挂起.
请帮助我,因为这个问题我无法入睡.
好的,这就是情况:我有2页:
现在在html页面中,将有内部javascript编码,以允许放置'window.onload',以及其他页面特定的方法/功能.
但是,在外部javascript中,我希望在触发'window.onload'事件之前完成某些事情.这是为了允许首先初始化定制组件.
有没有办法确保在触发'window.onload'事件之前在外部javascript中进行初始化？
我之所以这样说的原因,就是尝试制作可重用的代码(构建一次 - 全部使用),外部脚本必须在主html/jsp/asp中的javascript之前检查它是否在'order/check'中/ php页面接管.而且我也不是在寻找JQuery @ _ @的解决方案
以下是stackoverflow.com上的一些链接我已经浏览了解决方案:
- Javascript - 如何检测文档是否已加载(IE 7/Firefox 3)
- 如何检查页面是否已完全加载(脚本和所有)？
- 页面完全加载时执行Javascript
有人可以帮助或指导我找到解决方案吗,你的帮助将是非常值得赞赏的,请 - 谢谢:D
此致,克雷格
大家好,感谢您的建议和建议的解决方案,它们在搜索和测试可行解决方案时都非常有用.虽然我觉得我对自己的成绩并不是百分之百满意,但我知道你的建议和帮助让我更接近解决方案,并且可能确实在类似的情况下帮助其他人.
以下是我的想法:
test_page.html
<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>
<style type="text/css">
div {
border:thin solid #000000;
width:500px;
}
</head>
<body>
<div id="div_1"></div>
<br/><br/>
<div id="div_2"></div>
<br/><br/>
<div id="div_3"></div>
</body> …当通过Ajax调用foo方法时MyController,它可能返回如下的Javascript代码:
class MyController < ApplicationController
def foo
render :js => "alert('Hello');"
end
end
是否有可能做类似的事情在foo正常调用时返回Javascript代码(不是通过Ajax)？我会做这样的事情:
class Job < ApplicationController
def edit
if user_type == 'demo'
[Here I would like to display a Javascript alert saying that
the job cannot be edited in demo mode. How would you do this?]
else
@job = Job.find(params[:id])
end
end
end
嗨,我是Javascript的新手,我试图在窗口加载后尝试删除一些元素.
这是HTML
<html>
<head>
<title>Simple Quiz</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Quiz</h1>
<h2>Question</h2>
<p id="question"></p>
<form name="choices">
<fieldset>
<!-- insert questions here dynamically via javascript! -->
<label><input type="radio" name="choice" value="1st">First-class</label>
<label><input type="radio" name="choice" value="2day">2-day Air</label>
<label><input type="radio" name="choice" value="overnite">Overnight</label>
</fieldset>
</form>
</body>
</html>
函数removeQuestions()在页面加载后在控制台中调用时工作正常,但我似乎无法使用窗口的onload事件使其工作.有趣的是,它适用于JSFiddle(在这里找到),但不是当我在chrome中本地启动页面时.我不对的是什么？谢谢
这是script.js文件:
// JS executed after window has been loaded
function removeQuestions() {
var choices = document.forms.choices.elements[0].children;
// remove choices
while (choices.length > 0) {
var choice = choices[0];
choice.parentNode.removeChild(choice);
} …我的目标网页包含很大的Google Maps部分，这会减慢加载时间。我正在尝试执行以下操作：
我已经做到了：
$(document).ready(function() {
map_initialize();
}
该map_initialize()函数将地图加载到其容器div中。但是，这仍然不会显示静态元素。页面将等到map_initialize()完成，然后在与地图同时加载静态元素。
我有一个简单的HTML页面,里面有一点JavaScript.JavaScript在正文中启动onLoad.身体也有背景图像.JavaScript在加载背景图像之前启动.有没有办法让身体onLoad等待身体背景图像加载？
<body background="http://xxx.com/xxx.jpeg" id="myBody" onload="pageLoaded()">
所以，我有这个 HTML 文档
<!DOCTYPE html>
<html>
<head>
<title>TestPage</title>
<script src="script.js"></script>
</head>
<body>
<p id="test">Sample text</p>
</body>
</html>
有了这个JS文件
window.addEventListener("load", MyFunction());
function MyFunction(){
document.getElementById("test").innerHTML = "it worked";
}
当然这不起作用（文本没有改变），因为它在实际加载<p id="test"></p>元素之前加载脚本（我认为）。这可能看起来很奇怪，但我想在所有内容加载后更改某些元素的内容。我已经搜索过，但无济于事。我可能在这里遗漏了一些明显的东西，但我似乎无法弄清楚。任何意见，将不胜感激！
我有一个案例,我需要检查页面上是否存在jQuery,如果没有,我需要加载它.我创建一个脚本标记并引用外部jQuery库.在继续使用脚本的其余部分之前,如何等待在页面上加载库？
更新:
继祗园的建议后,看起来是什么样的:
if (typeof jQuery === 'undefined') {
var j = document.createElement('SCRIPT');
j.type = 'text/javascript';
j.src = '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(j);
j.onload = function () {
var section = document.createElement('DIV');
section.setAttribute('style', 'height:300px; width:250px; position: fixed; right: 0px; top: 100px;z-index: 9999; border-style:solid;border-width:1px;');
section.innerHTML = '<p>steps</p><textarea name="steps"></textarea><p>expected results</p><textarea name="results"></textarea><p><input type="button" name="submit" value="add test case" /></p>';
document.getElementsByTagName('body')[0].appendChild(section);
};
}