Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Jquery lädt nicht immer

  • 1
  • 2

Werbeanzeige

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

1

11.05.2016, 16:28

Jquery lädt nicht immer

Ich hab mir vor kurzer Zeit eine Website gemacht, und damit es ein bisserl interessanter ist, ein spielbares Klavier mit html, css und JQuery programmiert. Solange ich es offline öffne funktioniert jede Taste, aber wenn ich es hochgeladen habe und dort öffne lädt es nicht immer alle Tasten, manchmal funktioniert Jquery auch gar nicht. Meistens geht es beim 1. Mal schlechter als bei den darauffolgenden Malen.
Zum Klavier: Wenn man über eine Taste fährt, sollte sie grau werden, und wenn man die Maus darüber loslässt sollte es den Ton spielen.

Der Code:
html index

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head> [...]
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
[...]
    <!--Piano-->
    <div class="piano_background">
        <div class="piano" w3-include-html="Piano/Piano.html"></div>
        <script src="include.js"></script>
        <script src="Piano/Piano.js"></script>
    </div>
[...]
</body>


html piano

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="JQuery/jquery-ui.min.css">
        <script src="JQuery/external/jquery/jquery.js"></script>
        <script src="JQuery/jquery-ui.min.js"></script>

        <link type="text/css" rel="stylesheet" href="Piano.css"/>
        <script type="text/javascript" src="Piano.js"></script>
    </head>

    <body>
        <div class="piano">
            <!--Weiße Tasten-->
            <div class="white" id="w_A0"></div>
                        [...]
            <div class="black" id="A7"></div>

            <p><br><a href="#" title="If it doesn't work you could try to reload the page" style="text-decoration:none;">Play me!</a></p>
        </div>
    </body>
</html>


js Piano

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

var main_func = function() {

    $('.white').mouseenter(function() {
        $(this).addClass('highlighted_white');
    });
    $('.white, .black').mouseleave(function() {
        $(this).removeClass('highlighted_white');
    });

    $('.black').mouseenter(function() {
        $(this).addClass('highlighted_black');
    });
    $('.black').mouseleave(function() {
        $(this).removeClass('highlighted_black');
    });
    
    function Play($Audio) { 
        $Audio.currentTime = 0;
        $Audio.play();
    }

    // 
    var A0 = document.createElement('audio');
    A0.setAttribute('src', 'Note/A0.mp3');
    var Bb0 = document.createElement('audio');
    Bb0.setAttribute('src', 'Note/Bb0.mp3');
[...]
    var C8 = document.createElement('audio');
    C8.setAttribute('src', 'Note/C8.mp3');
// #w0_A0 -> weiße Taste
// #A0    -> Schwarze Taste

        $('#w_A0').mouseup(function() {Play(A0);});
    $('#A0').mouseup(function() {Play(Bb0);});  
[...]
    $('#w_C8').mouseup(function() {Play(C8);});

}

$(document).ready(main_func);
$(window).bind('page:change', main_func);


Include.js

Nimelrian

Alter Hase

Beiträge: 1 216

Beruf: Softwareentwickler (aktuell Web/Node); Freiberuflicher Google Proxy

  • Private Nachricht senden

2

11.05.2016, 16:49

Zitat von »Lindraupe«

Meistens geht es beim 1. Mal schlechter als bei den darauffolgenden Malen.

Ich bin kein Experte in Sachen Browserside JS, aber das hört sich für mich danach an, dass dein eigenes Skript schneller geladen ist als jquery. Habe gerade einmal kurz geschaut wie man dafür sorgen kann, dass ein eigenes Skript erst nach jquery geladen wird.
Ich bin kein UserSideGoogleProxy. Und nein, dieses Forum ist kein UserSideGoogleProxyAbstractFactorySingleton.

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

3

11.05.2016, 17:19

Ich wüsst zwar nicht, warum dann manche Tasten mittendrin nicht funktionieren, aber ich werds mal probieren :)

marcgfx

Treue Seele

Beiträge: 236

  • Private Nachricht senden

4

11.05.2016, 17:21

Debuggen :P
Es wäre natürlich super gewesen, du hättest direkt den Link zu der Problemseite gepostet, anstatt den ganzen Source in Stücken... ich werde mir das nicht zusammenkopieren, damit es bei mir nicht läuft ;)
jQuery als Ursache ist eine sehr spannende Diagnose aber recht unwahrscheinlich.
Devader DevLog - Devader spielen

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

5

11.05.2016, 17:27

Meinst du den Link zu der Website oder zum Code?
Und bis jetzt hab ichs mit Editor geschrieben, deswegen hab ichs noch nicht mit debuggen probiert :P Werd ich dann noch probieren

Nimelrian

Alter Hase

Beiträge: 1 216

Beruf: Softwareentwickler (aktuell Web/Node); Freiberuflicher Google Proxy

  • Private Nachricht senden

6

11.05.2016, 18:16

Zitat von »marcgfx«

Es wäre natürlich super gewesen, du hättest direkt den Link zu der Problemseite gepostet, anstatt den ganzen Source in Stücken...

Hat er doch
Ich bin kein UserSideGoogleProxy. Und nein, dieses Forum ist kein UserSideGoogleProxyAbstractFactorySingleton.

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

7

11.05.2016, 19:11

Füg mal noch ein unbind() für die Eventhandler an, sonst hast du nachher viele doppelt wenn jemand das Fenster verändert (durch window.onchange), kann komische Ergebnisse liefern. Ansonsten debuggen und gucken dass jquery auf jeden Fall vor deinem Script geladen wird.
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

H5::

Treue Seele

Beiträge: 368

Wohnort: Kiel

  • Private Nachricht senden

8

11.05.2016, 19:11

So wie ich das auf die Schnelle sehe fügst du in deine index.html eine weitere Vollständige Seite ein, nämlich die piano.html. Dadurch wird dein HTML Dokument invalide, da es nur einen html tag geben darf. Das Verhalten der Browser ist dadurch undefiniert. Nebenbei existiert das jquery in deiner piano.html nicht auf dem Server.

Übrigens, was du mit include.js machst gibt es schon mit den HTML Imports. Für einige Browser muss man dabei jedoch ein polyfill nutzen.
:love: := Go;

xardias

Community-Fossil

Beiträge: 2 731

Wohnort: Santa Clara, CA

Beruf: Software Engineer

  • Private Nachricht senden

9

11.05.2016, 21:14

Ein weiteres problem ist, dass du das Piano asynchron dazu laedst.

$(document).ready(main_func); wird ausgefuehrt sobald das DOM fertig ist, das DOM ist aber schon fertig bevor die Piano.html dazu geladen wurde, ergo gibt es die ganzen DOM elemente die du in deiner main_func verarbeitest noch nicht.

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

10

11.05.2016, 21:29

Ich werd das alles mal probieren wenn ich wieder ein bisschen Zeit habe, danke euch allen <3

@xardias Bin mir nicht sicher, ob ichs richtig verstanden habe: Mein javascript speichert die Töne als Variablen ab. Und wenn es die piano.html Datei bis dahin noch nicht geladen hat funktioniert "$('#w_A0').mouseup(function() {Play(A0);});" nicht, weil es #w_A0 zu dem Zeitpunkt noch nicht gegeben hat?

Werbeanzeige

  • 1
  • 2

Ähnliche Themen