Question

我正在个人网站上扩展我的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'。但它没有解决主要问题，即笔记应用程序的错误加载。

感谢您的帮助！

Answer 1

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():"";
});

jQuery加载直到刷新？

1 个答案: