Javascript的行为与PHP包含文件不一致


Javascript behaving inconsistently with PHP include files

我有一个非常简单的javascript动画,看起来像这个

$(function() {
$('#slider1').cycle();
$('#slider2').cycle();
});

然后我在脑海中调用这样的脚本:

<script type="text/javascript" src="js/slider.js"></script>

然后,id为"slider1"answers"slider2"的div包含在php中,包括被调用到页面中的文件,如下所示:

<?php include('assets/col1.php'); ?>

include文件中的代码如下所示:

<div id="slider1">
<img src="images/image1.png" />
<img src="images/imgae2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>

除了IE8或IE9之外,这一切都很好。javascript将在75%的时间内工作,这就是为什么这让我感到困惑。当你加载页面或返回页面时,每隔一段时间它就不会激活javascript,所有图像都会在一个长列中呈现(基本上就是没有js函数的情况)

我怀疑这与IE9加载PHP和javascript的顺序有关,但我只是js和PHP的新手,所以关于如何修复这一问题,一些非常明确的帮助将非常棒。提前谢谢。

Soooo长话短说。。。

PHP将返回解释后的HTML。每次包含文件时,PHP都会刷新缓冲区,这意味着某些内容会先于其他内容返回到浏览器。发生这种情况时,页面仍处于加载状态。

因此,您需要确保调用$(document).ready(function(e){ ... });。这将使代码有机会在javascript执行之前完成缓冲区的刷新并加载到浏览器中。。

我在使用Dojo时遇到了类似的问题,我解决了如下问题:将主div或父div显示样式设置为none:

<div id="g_body" style="display:none">

现在,一旦Dojo完成加载,我就使用Dojo.ready函数将显示样式更改为块:

require(["dojo/ready", "dojo/parser", "dijit/registry"], function(ready, parser, registry){
  ready(function(){
    if(document.getElementById("g_body")!= null){
        document.getElementById("g_body").setAttribute("style","display:block");
    }
  });
});

然后,页面仅在Dojo元素完全加载时显示。

我相信jQuery中也有类似的东西,但我不确定。可能:

$(document).ready(function() {});

希望这能有所帮助。