jQuery加载直到刷新?

时间:2013-08-25 20:35:31

标签: php javascript jquery html5

我正在个人网站上扩展我的jQuery知识。我用PHP编写了这个页面,它运行正常,没有控制台错误: http://sallibert.com/apps/notes/notes.php

但是,当我在索引文件中使用include调用它时,动画会在加载时卡住: http://sallibert.com/index.php#!notes

JS链接很好,并且没有不良链接。

我尝试过这些不同的解决方案,但没有一个能够解决问题:

  • 将JS链接放在正文中
  • $('document').ready(function(){替换为jQuery(document).ready(function(){
  • jQuery.noConflict();

有没有人有任何想法来解决这个错误? 谢谢你的帮助!

编辑:

我已更新上面的链接,您现在可以查看。我在Firefox上没有错误日志,但现在在chrome上,我有两个。我试着解决它们:

未捕获的TypeError:无法调用未定义的方法'toLowerCase' 我认为第一个错误与此相关。

未捕获的TypeError:无法读取null的属性'style' 首先,我使用html加载附加html,然后,当页面加载时,应用一些JS:

$(document).ready(function(){
    ...
$('#horloge .app_logo').append('<img class="aigfix" id="aigS" src="img/aigS.png"     alt="" style="transform: rotate(314784deg);"><img class="aig" id="aigM" src="img/aigM.png" alt="" style="transform: rotate(5246deg);"><img class="aighfix" id="aigH" src="img/aigH.png" alt="" style="transform: rotate(437deg);">');
....
});

window.onload = function() // wait before load
   {
      var d    = new Date();
      var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();

      var aigS = document.getElementById('aigS');
      var aigM = document.getElementById('aigM');
      var aigH = document.getElementById('aigH');

      aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.OTransform      = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
      aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
      aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
      aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
      aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';

      setInterval(function() {
         time++;
            aigS.style.MozTransform    = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.OTransform      = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.msTransform     = 'rotate(' + (time * 6) + 'deg)';
            aigS.style.transform       = 'rotate(' + (time * 6) + 'deg)';
            aigM.style.MozTransform    = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.OTransform      = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.msTransform     = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigM.style.transform       = 'rotate(' + Math.round(time / 10) + 'deg)';
            aigH.style.MozTransform    = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.OTransform      = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.msTransform     = 'rotate(' + Math.round(time / 120) + 'deg)';
            aigH.style.transform       = 'rotate(' + Math.round(time / 120) + 'deg)';
      }, 1000);
   }

php包含的代码是:

<?php
    $appid = strtolower($_GET['appid']);
    if($appid && file_exists('apps/'.$appid.'/'.$appid.'.php')){
        header('Location: apps/'.$appid.'/'.$appid.'.html');
    }
?>

UPDATE2: 我刚刚看到文件夹中的应用程序未定义。我使用数组调用它们:$ apps [1] =数组('地图',数组('CV',数组('完成','Expériences','Compétences','Diplomes','Autres','Rech' erche')),'消息',......); 我已经解决了Uncaught TypeError:无法调用未定义的方法'toLowerCase'。 但它没有解决主要问题,即笔记应用程序的错误加载。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

window.onload可能会在$(document).ready之前执行。如果您使用一种类型的onload事件,您应该坚持使用它而不是混合它们。也试着不要指望document.ready事件按特定顺序触发,如果你需要一些级联事件,你应该触发自己的事件:

//declare a custom event
$(document).on('myevent', function(e){

});

// trigger a custom event
$(document).trigger('myevent');

您应该将代码从window.load移动到jquery ready函数。

<强>日期

您可能更喜欢new Date().getTime() / 1000

,而不是您的公式

toLowerCase错误

更改plugins.js(第75行):

cache = rows.map(function(){
    return $(this).children('.search_str').html().toLowerCase();
});

到:

cache = rows.map(function(){
    var el = $(this).children('.search_str');
    return el?el.html().toLowerCase():"";
});