当有人点击图片时,我们使用jQuery thickbox动态显示iframe.在这个iframe中,我们使用galleria一个javascript库来显示多张图片.
问题似乎是$(document).ready在iframe似乎过早被解雇并且iframe内容甚至尚未加载,因此galleria代码未在DOM元素上正确应用. $(document).ready似乎使用iframe父就绪状态来决定iframe是否准备就绪.
如果我们在单独的函数中提取由文档就绪调用的函数,并在超过100毫秒后调用它.它有效,但我们不能利用慢速计算机生产机会.
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
Run Code Online (Sandbox Code Playgroud)
我的问题:我们应该绑定哪个jQuery事件,以便在动态iframe准备就绪时能够执行我们的代码,而不仅仅是它的父级?
我正在尝试学习jQuery,我很困惑document.ready()函数的工作原理
$(document).ready(function(){}
Run Code Online (Sandbox Code Playgroud)
在HTML中,
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)
链接位于文档的最底部,就在关闭正文标记之前.在我的javaScript文件中,我的所有代码都在.ready函数中.然而,当我加载页面,并将鼠标悬停在链接上时,我的光标不会变成指针几秒钟,如果我立即向下滚动,文本尚未加载几秒钟,或者.我的javaScript文件有一堆iframe等...所以我可以理解为什么延迟,但令我困惑的是,我认为.ready函数的重点是javaScript没有加载,直到页面中的其他所有内容先被装?所以我的文字和我的CSS应该马上工作吗?这是我的代码,如果它有帮助.如果需要,我也可以发布css.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myPage</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div id="container">
<div id="backgroundLeft"><img id='backgroundLeftImage' src="Left.jpg" width="100%"></div>
<div id="wrap">
<p id="text">...some text... <span id="firstLink" class="link">click me</span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ...some more text.... <span id="secondLink" class="link">click me</span>,
</span><span>
<iframe id="frame2" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
... some more text... <span id="thirdLink" class="link">click me</span> </span><span>
<iframe id="frame3" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ... some more text... …Run Code Online (Sandbox Code Playgroud)