• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Bildeinblendung nur beim 1. Mal - in JS-Schleife fehlt das Bild?

S

stefbreh

New member
Hallo zusammen,
habe eine Frage zu Javascript.
Wäre toll und dankbar, wenn mir jemand auf die Sprünge helfen könnte ...

Auf ... ist rechts ein Bildaufbau bzw. im rechten unteren Kästchen ein Bildablauf mit Javascript dargestellt.

Passend zum Text soll im rechten untern Kästchen ein neues Logo erscheinen.
(wird an 5. Stelle eingeblendet - Rot mit NEU Schriftzug).
Soweit habe ich alles hinbekommen - nun fiel mir auf, das das Kästchen an Position 5 (Rot mit NEU Schriftzug) nur beim ersten Durchgang eingeblendet wird und dann nicht mehr …

Woran kann das liegen? Ich vermute, es ist eine JS-Schleife, kenne mich damit aber nicht aus ...

Weiß jemand, was ich noch einfügen/verändern muss um die Bild 5 auch in die Schleife mit einzubeziehen?

Dies hier ist ein Azszug aus "layout.js" bei dem ich denke, es ist dafür verantwortlich.

Vielen Dank
Stefan


Code: 
	}
	else if($('#wrapper').hasClass('referenzen')) {
		$('nav, .center-inner').show();
		$('#cube').find('.line-1, .line-2').hide();
		$('#cube').find('.sig').hide();
		$('strong.blue').hide();
		$('.incube-text').hide();
		$('#cube').find('.cube-tile').css({ height: '46%', width: '46%'});

		$('#cube').find('.cube-tile').last().addClass('red');
		$('.tilepic.tombstones-1').show();
		$('.tilepic.tombstones-2').show();
		$('.tilepic.tombstones-3').show();
		$('.tilepic.tombstones-4').show();

		$('#cube').find('.cube-tile').last().prev().css({ 'background-color' : '#cfdfe7'});

		$('.pagination').hide();
		$('.center, .right').hide().css({right: '-1200px'});


		$('#cube').find('.cube-tile').css({ width: '50%', height: '50%'});
		$('#cube').find('.cube-tile').find('img.tilepic').css({
			width: $(this).closest('.cube-tile').width()+'px !important',
			height: $(this).closest('.cube-tile').height()+'px !important'
		});
		var count = 2;

		var countx = 2;

		$('.center, .right').animate({
			right: '0px',
			opacity: 'show'
		}, { duration: 1000, complete: function() {

			if(--count != 0) return 0;

			$('div.cube-tile').animate({
				width: '46%',
				height: '46%'
			}, {
				duration: 500,
				complete: function() {
					if(--countx != 0) return 0;

					$('.tilepic.tombstones-4').stop().fadeIn(0).delay(1000).queue( function() {
					$('.tilepic.tombstones-1').stop().fadeOut(0);
					$('.tilepic.tombstones-2').stop().fadeOut(0);
					$('.tilepic.tombstones-3').stop().fadeOut(0);
					$('.tilepic.tombstones-4').stop().fadeOut(0);
					$('.tilepic.tombstones').stop().fadeIn(0);

					$('.tilepic.ref-1').animate({
						opacity: 'show'
					}, {
						duration: 2000,
						complete: function() {
							$('.tilepic.ref-1').animate({
								opacity: 'hide'
							}, {
								duration: 2000,
								complete: function() {
									$('.tilepic.ref-2').animate({
										opacity: 'show'
									}, {
										duration: 2000,
										complete: function() {
											$('.tilepic.ref-2').animate({
												opacity: 'hide'
											}, {
												duration: 2000,
												complete: function() {
													$('.tilepic.ref-3').animate({
														opacity: 'show'
													}, {
														duration: 2000,
														complete: function() {
															$('.tilepic.ref-3').animate({
																opacity: 'hide'
															}, {
																duration: 2000,
																complete: function() {
																	$('.tilepic.ref-4').animate({
																		opacity: 'show'
																	}, {
																duration: 2000,
																complete: function() {
																	$('.tilepic.ref-4').animate({
																		opacity: 'hide'
																	}, {
																		duration: 2000,
																		complete: function() {
																		$('.tilepic.ref-5').animate({
																		opacity: 'show'
																	}, {
																			duration: 2000,
																			complete: function() {
																			$('.tilepic.ref-5').animate({
																			opacity: 'hide'
																			}, {
																				duration: 2000,
																				complete: function() {
																				referenzShow();
																		}
																	});
															}
																	});
																}
															});
														}
													});
												}
											});
										}
									});
								}
							});
						}});
						}});
						}
					});
				});

				}
			});
				
			}
		});

		$(document).delay(1000).queue( function() {
			showPagination();
		});

		if($('.slide').length) {
			$('.slide').hide();
			$('.slide').first().show();
		}
 
Zuletzt bearbeitet:
Hallo stefbreh,

Willkommen hier im Forum.

Wenn ich Dich richtig verstande habe, zeigt Dein "NEU" (in rot und unten rechts in einem Durchlauf) nur 1x sein Gesicht. Ich habe mir jetzt den Snippet von Dir nicht angeschaut, weil das in einem Forum in dem Umfang immer etwas "anstrengend" ist.

Ich habe mir also via "Direktlink" mal einen Eindruck erstellt. Wo ich zunächst drüber stolper ist if(isMobile || $.cookie('intro') == 1) {, denn das "besondere A" steht da tatsächlich so drin. Da Du in der Folge auch persönlich hast, solltest Du sehr gern mal die Kodierungen Deiner Datei prüfen. Denn Du arbeitest da mit Wordpress und das macht eigentlich sehr zuverlässig aus seinen Sachen "utf-8". Unter Umständen ist Dein Editor der Sündenbock.

Aus Performance-Sicht hast Du viele Dinge drin, die kürzer geschrieben werden können - nenne ich als allg. Beispiel mal das, denn die stehen so (fast) direkt hinterinander. jQuery ist mächtig - mit Selektoren und Chaining weltberühmt geworden. Nutze es doch auch für bspw.:
Code: 
$('#shortkeys').hide();
$('.incube-text').hide();
$('.pagination').hide();
$('strong.blue').hide();

Für alle anderen, die vielleicht helfen wollen - es geht um ref-5.png. Gelistet werden die Referenzen u. a. mit class="tilepic ref-5" style="display: none"/>. Man sagt Inline-CSS nach, dass es unerwartete Verhalten im Browser (davon gibbet ja ein paar verschiedene) provozieren bzw. auslösen kann. Meide Deinerseits so viel Inline-CSS wie möglich! Ist auch eine Empfehlung seitens Google (Webmaster-Richtlinien; allerdings sollte klar sein, warum die das empfehlen!). Sprich: Aus SEO-Sicht auch 'ne Bremse (kann aber auch sein, dass WP eine gewisse Mitschuld hat)!

Schaue ich mir das jetzt insgesamt an, und ich müsste Dir eine Note dafür geben, wäre das ... nicht nur "durchgefallen"! Bekämst wohl auch 'nen Verweis! :D Warum verwendest Du a) keinen allgemeinen Selektor auf Deine Referenzen via Klasse und b) lässt dies dann mittels Intervall "pausieren", dafür aber per .each() durchlaufen?

Reden wir über den Selektor! Wenn ich mich nicht versehen habe, könntest Du doch eigentlich alle Referenzen mit einem Einzeiler erfassen: $("[class~='ref-']"). Mittels .each(function(){ ... }) lässt Du das abarbeiten, was jetzt mit "..." lapidar erwähnt ist (fadeIn in der Klasse "cube-tile-3"; Hinweis: Das wäre eher eine ID-Bezeichnung!). Hier kommt aber auch die Verzögerung hin, die Du wünschst - ich empfehle die Verzögerung (setTimeout) nach dem vollstreckten fadeIn(). Du ergänzt diese each-Schleife um einen Zähler, welcher vorher den Selektor mit .length() gezählt hat - damit Du weißt, wieviele Referenzen da sind, die gezeigt werden sollen. Wofür der Zähler? Um wieder von vorn zu beginnen - ist der Zähler am gesetzten Limit, ruft er die Funktion wieder auf, damit Deine Anzeige von vorn beginnt. Lecker wird es, wenn der Selektor weiterhin Gültigkeit hat und Du nicht ständig ins DOM greifst.

Diese Lösung wäre mit wohl grob zehn Zeilen kurz; und damit sehr übersichtlich (gegenüber Deinem jetzigen Konstrukt). Denn: Was machst Du eigentlich mit Deinem Script und dem Besucher, wenn bspw. "ref-6" und "ref-7" hinzu käme? Und daher wärst in meiner (fiktiven) Schulung leider durchgefallen, da nicht alle erkennbaren Eventualitäten abgefangen worden wären. :)

Viel Erfolg.


EDIT: Da wir von SEO sprachen, noch ein kleiner, weiterer Seitenhieb: Bilder mit anderer width/height per Ratio im DOM meint nicht "responsive". Wenn Du nur Bilder in der Größe benötigst wie in der Originalseite angezeigt, solltest Du Dir mal das Originalmaß von "ref-5" anschauen. ;) Das ist Traffic, den man allen Protagonisten ersparen kann - dem Mobilgerätenutzer sogar "muss".
 
Hi SteelWheel,
danke für deine umfassende Antwort - leider kenne ich mich mit Javascript nicht wirklich gut aus und habe mir eine Lösung erhofft.
Ich selbst habe diese Website weder aufgebaut noch codiert sondern wurde gebeten, ein neues Bild (ref-5) hinzuzufügen.

Daher meine Frage: Was fehlt noch an Code bzw. was muss ich ändern um Bild 5 in diese diese Javascript-Schleife miteinzubeziehen?

Beste Grüße
Stefan
 
Hi Stefan,

das ist genau meine Angst gewesen. Du hast es nicht verbrochen, sollst aber jetzt drin Herumfuhrwerken - wie groß ist die Gefahr, dass es "verschlimmbessert" wird? Naja, dann will ich Dir das Leben auch nicht unnötig schwierig machen in diesem SCHROTT (jetzt darf ich es ja schreiben - ist ja nicht Deins ^^).

Die letzte .complete()-Funktion (die von .tilepic.ref-5) ruft nach ihrer 2000er Duration die Funktion "referenzShow()" auf - sieht Du das? Ich zeig's Dir lieber:

Code: 
$('.tilepic.ref-5').animate({
	opacity: 'show'
}, {
	duration: 2000,
	complete: function() {
		$('.tilepic.ref-5').animate({
			opacity: 'hide'
			}, {
				duration: 2000,
				complete: function() {
					referenzShow();
				}
			});
	}
});

In dem oben direkt verlinkten JavaScript (nicht Dein Snippet) findest Du besagte Funktion - such in Deiner JavaScript-Datei danach. Vergleiche diesen ERSTDURCHLAUF mit der Funktion, die gerufen wird, wenn er erstmals durch ist. Anders gefragt: Wieviele "tilepic" behandelt die Funktion "referenzShow"? Und schon hast die Lösung ... oder noch ganz anders: "referenzShow" kennt ref-5 nicht ... daher kommt der nicht nochmal.

Warum der Macher des Scripts ... ach ... egal!

Viel Erfolg. ;)
 
Hi SteelWheel,

danke für deine schnelle Antwort.

Den Code ...

Code: 
	}, {
duration: 2000,
complete: function() {
$('.tilepic.ref-5').animate({
opacity: 'show'
}, {
duration: 2000,
complete: function() {
$('.tilepic.ref-5').animate({
opacity: 'hide'
}, {

habe ich selbst hinzugefügt und es damit geschafft, das das Bild "ref-5" eingeblendet wird.

Zumindest wird es einmal eingeblendet. :-/

Wo muss ich "referenzShow();" noch einfügen bzw. wie muss ich den Code verändern, damit Bild 5 in diese Javascript-Schleife miteinzubezogen wird?

Wäre für für einen Tipp oder ein konkreteren Lösungansatz echt dankbar - habe schon diverses ausprobiert und verliere gerade den Überblick über meine
Codierungvarianten ...

Beste Grüße
Stefan
 
Hi Stefan,

na, ich hab doch gesagt, dass Du die Funktion "referenzShow" in der gleichen JS-Datei hast, welche Du oben ja für die Allgemeinheit verlinkt hast ... schau Dir diese Funktion mal an - die ist identisch mit Deinem "Erstaufrufdurchlauf" - nur fehlt dieser Funktion "ref-5" (das sieht man doch eigentlich auf Anhieb); und das ist der Grund, warum er nur 1x "ref-5" zeigt ... die "referenzShow()" kennt "ref-5" gar nicht. Was Du also in den Erstdurchlauf gesetzt hast, wirst also auch in diese Funktion setzen müssen.

Und über den Stil unterhalten wir uns dann vielleicht noch ein anderes Mal. ;) Oder wie man es besser lösen kann (ohne bspw. zwei Stellen editieren zu müssen, die ein und die gleiche Sache machen). :)

Übrigens: Wenn Du es gelöst hast, darfst Du offiziell demjenigen, der das so gebaut hat, kräftig in den Hintern treten ... ! :D
 
Hi SteelWheel,
ich hatte gar nicht gesehen, das weiter unten der Code auch noch zu ändern war ...
Habe es an dieser Stelle auch geändert und siehe das ... Bild 5 ist nun auch in der Schleife :)

Du hast schon recht ... selbst für jemanden wie mich, der sich nicht wirklich gut in Javascript auskennt sieht diese Doppelung an Code schon sehr umständlich aus ...

Leider kenne ich die Macher dieses Werkes nicht und kann da auch nichts mitgeben, aber nun ja ...

Vielen Dank für deine nette und ausdauernde Hilfe

Schönes Wochenende
Stefan
 
Hi Stefan,

wenn Du es jetzt auch noch "richtig" machst (eine Funktion - sowohl für Erstlauf als auch Re-Call), ist es schon gar nicht mehr "nicht wirklich gut in JavaScript". ;)

Schön, dass es geklappt hat und jetzt "wie von Zauberhand" (das ist dann Deine) läuft.

Ich habe gern geholfen - und wenn Du das da umschreiben willst, kriegen wir bestimmt auch noch was zusammen hin.

Ebenfalls ein schönes Wochenende, aber ich hier wird gearbeitet - und damit ist es schön. :D

Grüße vom Kaffeebecherrand.
 
Hi SteelWheel,
wirklich nett, das du mir Tipps zum umschreiben geben würdest - aber das lassen wir lieber mal - bin froh, dass es jetzt so läuft.

Kenne mich zuwenig mit JS aus und habe leider auch nicht die Zeit mich da mal richtig & tief reinzuknien, da immer wieder andere Baustellen rufen.


Grüße
Stefan :)
 
Zuletzt bearbeitet:
Hi Stefan,

beachte bitte nur, dass Du die Leute hier im Forum nicht für Deine abrechnungsfähigen Auftragsarbeiten (!) vor den Karren spannst - das hinterlässt schnell ein "G'schmäckle".

Noch eine Erwähnung: Mir lief kürzlich bei G+ eine Studie über den Weg (eine der enorm vielen dort), die sich mit der Zukunft und den Programmiersprachen selbiger befasst. Sollte der Trend sich so fortsetzen, wird NODE die Nr. 1 - und NODE ist JavaScript (client- wie serverseitig). Wie lange Du als Dienstleister also noch um JavaScript drumherum kommst, weiß ich nicht ... aber viel Zeit wirst Du nicht mehr haben, denn NODE ist in aller Munde (obwohl ich bislang selbst Bedenken habe).

Halt die Ohren steiff - aber bei der aktuellen Kältewelle ist das einfach. Wobei: Lieber steiff im Schritt als steiff im Ohr ... ! :D

Grüße
 
SteelWheel schrieb:
Hi Stefan,
beachte bitte nur, dass Du die Leute hier im Forum nicht für Deine abrechnungsfähigen Auftragsarbeiten (!) vor den Karren spannst - das hinterlässt schnell ein "G'schmäckle".
Grüße
Zum Vergrößern anklicken....

Nein, so ist es nicht. Das war die Webseite eines Freundes, der die Seite zwar von einer Agentur aufbauen ließ, diese sich aber inzwischen aufgelöst hat.
Quasi ein privater, unentgeltlicher Job unter Freunden :)

Grüßle
Stefan
 
Jetzt sieht es - dank Deines Edits oben - so aus, als würde ich eine blinde Behauptung aufgestellt haben ... :confused: ... Du wirst Deine Gründe haben. :p
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben