确保在调用js函数之前加载div

Question

EDIT: iam using ajax to load text in my content that is why onload on head is not applicable. 编辑：我使用ajax加载我的内容中的文本，这就是为什么onload on head不适用。

I have an almost complete project here http://sandbox.littlegraffyx.com/bible/test2.html (enter gen 1:1 on bottom left to start) 我在这里有一个几乎完整的项目http://sandbox.littlegraffyx.com/bible/test2.html （在左下角输入gen 1：1开始）

The only problem I have is to ensure that my main div where the main text is displayed is fully loaded before I call a function that will autofit the text content on the window. 我唯一的问题是确保在我调用一个将自动调整窗口上的文本内容的函数之前，显示主文本的主要div已完全加载。

There are times that my autofit function is working and there are times it isn't and the only reason I can think of why it's not working is maybe the div isn't fully loaded yet when I call the function. 有时我的自动调整功能正在工作，有时它不是，而且我能想到它为什么不工作的唯一原因可能是当我调用函数时div还没有完全加载。

echo "<div id=\"verse\">" . $bcontent . "</div>";

echo "<script type='text/javascript'>
    scaleQuote();";
echo "</script>";

The scalequote sample is found in my other question here scalequote样本在我的另一个问题中找到

Adjust size based on height (vertical length) 根据高度（垂直长度）调整大小

Here are the searches I made and I can't see how can I apply the solutions offered in these post in my case that is why I am asking one myself. 以下是我的搜索，我无法看到如何在我的案例中应用这些帖子中提供的解决方案，这就是为什么我要问自己。 Hoping I will not be down voted for "lack of research" 希望我不会因为“缺乏研究”而被投票

How do I run a function only when a div gets loaded? 如何在div加载时运行函数？

getting the height and width of a div after loading info into it from an external source with jquery 使用jquery从外部源加载信息后获取div的高度和宽度

thanks in advance and sorry for my english 提前谢谢，对不起我的英语

File references 文件参考

http://pastebin.com/wwQumwKJ - my JS file http://pastebin.com/wwQumwKJ - 我的JS文件

http://pastebin.com/FnyST8iz - my html file http://pastebin.com/FnyST8iz - 我的html文件

http://pastebin.com/BYfSUjQJ - my css file http://pastebin.com/BYfSUjQJ - 我的css文件

Except from getting the database contents, my php file is pretty much what is posted above. 除了获取数据库内容之外，我的php文件几乎就是上面发布的内容。

Answer 1

Complete re-edit of the answer. 完整重新编辑答案。 As JQuery library is already present in your page this whole bit is useless: 由于JQuery库已经存在于您的页面中，因此这一点毫无用处：

/* Function to get Requested Verse */
function showVerse(str)
{
if (str=="")
  {
  document.getElementById("versePlace").innerHTML="";
... etc etc.
xmlhttp.open("GET","getverse.php?q="+str,true);
xmlhttp.send();
}

Just replace it with 只需更换它

function showVerse(str)
{
    $("#versePlace").html("");
    $('#versePlace').load('getverse.php?q='+str, function() {
        scaleQuote();
    });
}

We are therefore moving scaleQuote() in a callback function. 因此，我们在回调函数中移动scaleQuote() 。

Reason for this: the scaleQuote() function is now called in the original HTML page, your first problem is that if you output a script in the AJAX result it won't be executed! 原因是： scaleQuote()函数现在在原始HTML页面中调用，你的第一个问题是，如果你在AJAX结果中输出一个脚本，它将不会被执行！
The second main concern is to call the scaleQuote() function ONLY AFTER the AJAX request is complete. 第二个主要问题是仅在AJAX请求完成后调用scaleQuote（）函数。 "A" in AJAX means "asynchronous", it means roughly that the caller continues its execution regardless of whether the request is completed or not. AJAX中的“A”表示“异步”，它大致意味着调用者继续执行它，无论请求是否完成。

So we must make sure to call scaleQuote() after the AJAX request-response has completed. 所以我们必须确保在AJAX请求 - 响应完成后调用scaleQuote() 。

JQuery's .load() function calls an AJAX page and puts the result in the element in parentheses ( $("#versePlace") , where # stands for "id"). JQuery的.load()函数调用一个AJAX页面并将结果放在括号中的元素中（ $("#versePlace") ，其中＃代表“id”）。 You pass your data via GET method with an object {q: str} and then you define a callback function that is guaranteed to run only after the request-response thing of Ajax is completed. 您通过GET方法使用对象{q: str}传递数据，然后定义一个回调函数 ，该函数保证仅在Ajax的请求 - 响应事件完成后运行。

Other functions can be reduced A LOT with JQuery: 其他功能可以通过JQuery减少很多：

/* Function to get Next Verse */
function MoveNext()
{
   var str = parseInt($("#txtCurrent").val()) + 1;
   if (str!="")
   {
       $("#versePlace").html("");
       $('#versePlace').load('move.php?q='+str, function() {
           scaleQuote();
       });
   }
}

Answer 2

Short answer 简短的回答

Inside your MovePrevious() function, add scaleQuote(); 在MovePrevious()函数中，添加scaleQuote(); inside the Ajax's callback: 在Ajax的回调中：

document.getElementById("versePlace").innerHTML=xmlhttp.responseText;
scaleQuote(); //<-- here

Long Answer 答案很长

You're using standard JS on your Ajax calls. 您在Ajax调用上使用标准JS。 Standard Ajax calls such as yours, which simply places the response HTML inside an element with innerHTML does not execute any script tags inside of the response text. 标准Ajax调用，如你的，这只是地方的响应HTML与单元内innerHTML 不执行响应文本内部的任何脚本标记。 It's different than jQuery's append / appendTo methods, which parse any script tags inside of your response text and executes it upon being added to the DOM. 它与jQuery的append / appendTo方法不同，后者解析响应文本中的任何script标记，并在添加到DOM时执行它。

Why does it work "most of the time" then? 为什么它“大部分时间”都可以工作呢？

Because your MoveNext() function already has a scaleQuote(); 因为你的MoveNext()函数已经有了一个scaleQuote(); function call inside of its callback. 函数调用其回调内部。

Answer 3

One thing you can do is, put the function in <head> tags, and add that js function to onload property of the div. 你可以做的一件事是，将函数放在<head>标签中，并将该js函数添加到div的onload属性中。 eg 例如

<body onload="scaleQuote()">

确保在调用js函数之前加载div

问题描述

3 个解决方案

解决方案1
2 2012-06-18 02:00:18

解决方案2
2 已采纳 2012-06-18 02:43:45

解决方案3
0 2012-06-18 02:01:13

确保在调用js函数之前加载div

问题描述

3 个解决方案

解决方案1 2 2012-06-18 02:00:18

解决方案2 2 已采纳 2012-06-18 02:43:45

解决方案3 0 2012-06-18 02:01:13

解决方案1
2 2012-06-18 02:00:18

解决方案2
2 已采纳 2012-06-18 02:43:45

解决方案3
0 2012-06-18 02:01:13