JQuery wird manchmal nach den JQuery Scripts geladen, was zu Fehlern führt

**DerUnwissende** · 29.07.2020, 08:47

Guten Morgen,

ich habe das Problem, dass JQuery bei mir ca. 1/3 der Male nach den Scripts geladen wird. Ich habe ein "J_Theme.html5" welches alle anderen Scripte läd.
Zum einen als Javascript-Einbindung im <head>, manche aber wegen Fehlern im TL_BODY-Array. Jene haben allerdings einen Listener auf den DOM der Seite und sollten demnach, meiner Meinung nach, erst Laden, wenn der <head> auch durch ist.

Was könnte die Ursache sein? JQuery habe ich im Backend aktiviert, darunter dann das J_Theme-Templates aktiviert in dem der Rest geladen wird.
Es handelt sich um eine Lokale Seite, mich würde aber stark wundern, wenn das der Grund wäre. Und wie gesagt, es ist nur ca. bei 1/3 der Fälle so, aber natürlich schlimm genug.

Beste Grüße

**Spooky** · 29.07.2020, 08:50

Poste einen Link zur Seite (oder zumindest den HTML Quellcode).

**DerUnwissende** · 29.07.2020, 08:57

Zitat von Spooky

Poste einen Link zur Seite (oder zumindest den HTML Quellcode).

Hier einmal die J_Theme.html5:

HTML-Code:

<?php

$GLOBALS['TL_JAVASCRIPT'][] = 'files/Portfolio/layout/js/typed.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/Portfolio/layout/js/typed_initialisierung.js';

$GLOBALS['TL_BODY'][] = '<script src="files/Portfolio/layout/js/lib/stats.js"></script>';
$GLOBALS['TL_BODY'][] = '<script src="files/Portfolio/layout/js/particles.js"></script>';
$GLOBALS['TL_BODY'][] = '<script src="files/Portfolio/layout/js/diverses.js"></script>';

Und hier der ganze Schinken:

HTML-Code:

<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Startseite - Portfolio</title>
<!-- base href="http://localhost/" -->
<meta name="robots" content="index,follow">
<meta name="description" content="Dies ist die Startseite..">
<meta name="generator" content="Contao Open Source CMS">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="Startseite%20-%20Portfolio-Dateien/css.css">
<link rel="stylesheet" href="Startseite%20-%20Portfolio-Dateien/layout.css"><script src="Startseite%20-%20Portfolio-Dateien/jquery.js"></script><script src="Startseite%20-%20Portfolio-Dateien/typed.js"></script><script src="Startseite%20-%20Portfolio-Dateien/typed_initialisierung.js"></script>
</head>
<body id="top" itemscope="" itemtype="http://schema.org/WebPage">
<div class="custom">
<div id="headerContent">
<div class="inside">
<div class="logoHolder">
<a href="http://localhost/index.php">
<img src="Startseite%20-%20Portfolio-Dateien/logo.png">
</a>
</div>
<!-- indexer::stop -->
<nav class="mod_navigation block" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
<a href="http://localhost/home.html#skipNavigation2" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="active first"><strong class="active first" itemprop="name">Home</strong></li>
<li class="sibling"><a href="http://localhost/portfolio-2.html" title="Portfolio" class="sibling" itemprop="url"><span itemprop="name">Portfolio</span></a></li>
<li class="sibling"><a href="http://localhost/blog.html" title="Blog" class="sibling" itemprop="url"><span itemprop="name">Blog</span></a></li>
<li class="sibling last"><a href="http://localhost/ueber-mich.html" title="Über Mich" class="sibling last" itemprop="url"><span itemprop="name">Über Mich</span></a></li>
</ul>
<a id="skipNavigation2" class="invisible">&nbsp;</a>
</nav>
<!-- indexer::continue -->
<div class="kontaktButton">
<a href="http://localhost/kontakt.html">Kontakt</a>
</div>  </div>
</div>
</div>
<div id="wrapper">
<div id="container">
<main id="main">
<div class="inside">
<div class="mod_article headerImage first last block" id="headerImage">
<div class="ce_text first last block">
<h1>Tom's Designstube</h1>
<div id="typed-strings" style="display: none;">
<h2>Text1</h2>
<h2>Text2</h2>
<h2>Text3</h2>
</div>
<h2 class="typeFirst">Wir</h2>
<h2 id="typed">Text3</h2><span class="typed-cursor typed-cursor--blink">|</span>
<div class="smoothAnchor"><a href="#about"><img src="Startseite%20-%20Portfolio-Dateien/down-arrow.svg" alt=""></a></div>
</div>
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1920" height="966"></canvas></div>
</div>
</main>
</div>
</div>
<script src="Startseite%20-%20Portfolio-Dateien/stats.js"></script><script src="Startseite%20-%20Portfolio-Dateien/particles.js"></script><script src="Startseite%20-%20Portfolio-Dateien/diverses.js"></script><script type="application/ld+json">{"@context":{"contao":"https:\/\/schema.contao.org\/"},"@type":"contao:RegularPage","contao:pageId":2,"contao:noSearch":false,"contao:protected":false,"contao:groups":[],"contao:fePreview":false}</script>
<script>$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var target=this.hash,$target=$(target);$('html, body').stop().animate({'scrollTop':$target.offset().top},900,'swing',function(){window.location.hash=target})})})</script>

<style type="text/css" data-typed-js-css="true">
        .typed-cursor{
          opacity: 1;
        }
        .typed-cursor.typed-cursor--blink{
          animation: typedjsBlink 0.7s infinite;
          -webkit-animation: typedjsBlink 0.7s infinite;
                  animation: typedjsBlink 0.7s infinite;
        }
        @keyframes typedjsBlink{
          50% { opacity: 0.0; }
        }
        @-webkit-keyframes typedjsBlink{
          0% { opacity: 1; }
          50% { opacity: 0.0; }
          100% { opacity: 1; }
        }
      </style></body></html>

In den Pfaden steht öfters was von "Portfolio-Dateien", es gibt allerdings nur den Ordner "Portfolio" mit weiteren Unterordnern: "img", "js", "style".