Hallo,

ich habe mit meiner Seite folgendes Problem:
wie man sieht benutze ich einen Preloader-Effekt, die Seite wird weiss und baut sich dann auf. Die Anleitungen dazu findet man ja schnell, im Java/Script-Bereich meines Heads passiert derzeit folgendes

// Wait until all images loaded
        $(window).on('load',function() {
     // Animate loader off screen
        $(".jtpl-logo").finish().delay(500).fadeOut(400);
})
 

Jetzt habe ich jedoch das Problem, das beim herumklicken auf den Unterseiten oft der Hintergrund kurz schwarz bleibt und die Bilder zu spät 'aufploppen'...nicht immer aber es kommt vor - besonders wenn ich auf dem Handy z.B. den Cache geleert hab und die Seite frisch öffne. Das möchte ich weg haben. Nur wie?!

Auf manchen Unterseiten habe ich gerade 3 Bilder die automatisch wechseln, und in anbetracht dessen das es eine Fotoseite ist möchte ich - falls möglich - nicht gern solch Funktionen an ein bestimmtes Bild 'binden', irgendwann verliere ich sonst vermutlich die Übersicht.

Jetzt habe ich die letzten 2 Tage mit dem jquery-Plugin 'waitforImages' herumgefummelt, leider vollkommen erfolglos - egal welchen Selector ich verwende, mein Preload-Effekt bzw. obige funktion bekomme ich damit einfach nicht ans 'laufen'.

Jemand einen Tipp für mich wie ich das lösen kann?

Wenn ich

 $(window).on('load',function() { 
 

durch

 $(window).waitforImages(,function() { 
 

wird meine Seite leider nichtmehr geladen...ich habe 'window' schon durch alle möglichen Divs und Ids versucht zu ersetzen, lauter Dinge ausprobiert...aber irgendwas mache ich da vermutlich grundlegend falsch. Das waitforImages.min.js-Plugin wurde vorher natürlich korrekt eingebunden...

Gibt es noch irgendeinen anderen Weg ausser diesem Plugin, das garantiert dafür sorgt das auch wirklich die Hintergrundbilder geladen werden bevor mein Preloader ausgelöst wird? Ich würde auch gerne das Delay in meinem Code wieder entfernen, muss ja (hoffentlich) nicht sein und macht alles nur langsamer.

Achso, Link zu meiner Seite für alle die den Vorstellungspost nicht sehen, leider kann ich das Eingangsposting nichtmehr editieren.

Niemand eine Idee?
Wie stelle ich 100%ig sicher, das meine Hintergrundbilder auf jeden Fall da sind wenn der FadeOut-Effekt die Seite anzeigt?

Warum sind sie trotz " $(window).on('load',function() {" überhaupt manchmal nicht da? 'Feuert' der Befehl zu früh während der Wrapper noch mit der Berechnung der Bildgrösse beschäftigt ist?

Kann ich das jquery-Plugin "waitforImages" irgendwie mit der Jimdoeigenen Hintergrundbilder-Funktion benutzen so das es auch funktioniert? Bzw mit dem Preload/-Fadeouteffekt?

Kann doch nicht sein...kann mir hier denn wirklich niemand verraten, wie ich sicherstelle das die Bilder die ich bei Jimdo als Hintergrund hochladen kann als erstes angezeigt werden bevor der Rest der Seite angezeigt wird??

Dashier hab ich mir jetzt auch selbst gelöst...jetzt werden alle Hintergrundbilder per webkit-animation eingeblendet...und es fällt einfach nichtmehr auf das sie teils später/langsamer geladen werden.

Ist noch nicht fertig, ich muss meine Zeiten von VG und HG noch alle ein bisschen anpassen, aber es wird und es funktioniert...heut Nacht ausgiebigst getestet...

Das war wohl nichts, sie ploppen immernoch auf...es ist zum wahnsinnig werden.

Hat denn niemand irgendeine Idee???

Ich probiere die ganze Zeit mit .waitForImages herum, leider erfolglos, damit bleibt die Seite unsichtbar/es funktioniert so nicht.

// Wait until all images loaded
    $('.jqbga-web--image').waitForImages(function() {
    $('.jtpl-main').css("visibility", "visible");
});;
 

Was kann ich tun damit die Hintergründe in Jimdo aufhören aufzuploppen?? Wie stelle ich sicher, das der Rest erst angezeigt wird wenn der Hintergund 100%ig geladen ist?

$('.jqbga-web--image').waitForImages(true).done(function() {
    $('.jtpl-main').css('visibility', 'visible');
});
 

funktioniert leider auch nicht. Woran liegt das, weiss das vllt jemand? Senden die Jimdo-Hintergründe einfach kein "load/ready"? Liegt es daran das sie von Jimdo skaliert werden?

Mit

Zitat

---

CSS: display:none und jQuery .fadeIn('slow')

---

verhält es sich völlig eigenwillig...auf der Startseite funktioniert es halbwegs (mal ploppt es auf, mal fadet es butterweich) - aber auf Unterseiten (teils mit genau dem selben Hintergrund!) bleibt es einfach nur grau....ich kann mir da keinen vernünftigen Reim drauf machen wieso, vollkommen willkürlich.

Ich befass mich jetzt mal mit diesem Lazyload, irgendwie versteh ich dessen Funktionsweise noch nicht so ganz...

Edit:
Ich habe jetzt also erstmal das Teil eingebunden im Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js" type="text/javascript"></script>
 

dann ein Html-Widget mit folgendem Inhalt ganz oben auf der Seite hinzugefügt

<img class="lazyload" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s4354a59fbfee63e4/backgroundarea/i262133c7bd677841/version/1474113351/image.jpg" width="2000" height="1500" />
 
 

und dann im Head unten im JS mit

      // Wait until all images loaded
        $(window).on('load',function() {
        $('.jtpl-main').css("visibility", "visible");
        $('.lazy').lazyload();
});;
 

eingebunden. Richtig soweit? Falls ja, der Hintergrund bleibt grau.

Es ist echt zum verzweifeln...was ist da los mit Jimdo? Warum funktioniert das alles nicht? Was passiert da genau bei Jimdo, weshalb all diese Funktionen nicht funktionieren?? Habs auch schon mit irgend nem anderen Jquery-Tool versucht, hab den Namen grad vergessn, Imageloader oder so, das gleiche Ergebnis...es will alles nicht wie es soll. Im Grunde müsste es mit .waitForImages doch funktionieren...aber wieso tut es das nicht?

Ah ich habe fürs Lazyload einn display: none vergessen rauszunehmen. Bereitet trotzdem noch Probleme: den HG muss ich mal beobachten, scheint auf den ersten Blick zu funktionieren.

Dafür ploppt jetzt - speziell auf meinem Handy gut sichtbar - das Navigation-Label ständig auw...wie in Zeitlupe die Seite für ein- zwei Sekunden...grosses Kino.
Hab schon versucht dem durch display:none des Labels sowie einem FadeIn(1000) etc entgegenzuwirken, ohne Erfolg. Habe somit also das nächste Problem..........

Weiterhin frage ich mich, werden die Hintergrundbilder mit Lazyload jetzt nicht eigentlich doppelt geladen - einmal durch lazyload und einmal standartmässig wie vorher auch? Verursacht das evtl die 1-2 Sekunden Verzögerung am Anfang? Mein Schnee ist es jedenfalls nicht, das habe ich schon getestet.

Jetzt muss ich mich mit dem Label rumplagen...jemand dazu eine Idee?

Kann ich lazyload eigentlich auch irgendwie mit einem webkit-fadein per css kombinieren bzw -webkit-animation auch irgendwie im js per .css aufrufen?

Wieso das alles nicht einfach mit .waitForImages funktioniert würde mich dennoch interessieren...das Handling von Lazyload ist doch sehr umständlich. Besonders wenn ich mal irgendein Bild ändern möchte...ausserdem wird bei dessen Nutzung auf meinem Handy dort wo ich das Html-Widget reinsetze eine riesengrosse weisse Leerbox angezeigt, welche ich zusätzlich auchnoch wieder im CSS mit Display:none ausblenden muss....sehr umständlich wie gesagt. Aber wenns nicht anders geht............

Das schlimmste ist jetzt jedoch das aufploppen bzw die 2 Sekunden Zeitlupe/einfrieren des Navigation-Labels. Das geht gar nicht und muss auch irgendwie noch behoben werden! Auf dem PC sieht es gut aus, das Label wird butterweich eingeblendet...auf meinem Handy sieht man den Effekt gar nicht - egal ob ich fadeIn(500) oder (2000) nehme. habs auch schon mit einem stop() oder finish() an versch Stellen innerhalb der (window).on-Funktion versucht, ohne Erfolg...irgendwas überfordert mein Handy (und somit sicherlich auch andere) da...von der Animation ist da nichts zu sehen.


Am liebsten wäre es mir ja, wenn ich die ganze Hintergrundproblematik irgendwie einfacher lösen könnte...nur wie?

Ich glaube jetzt habe ich mein Chaos vervollständigt
Hab grad festgestellt, das in den Id-Klassen die ich da ausblende weil mich die Boxen auf dem Handy irritiert haben ja die Bilder sind, die ich eig in den Hintergrund haben möchte....
jetzt stellen sich mir aber 2 Fragen:

Wie bekomme ich die in den Hintergrund?!

Und wieso hab ich - obwohl ja immernoch das ganz normale Hintergrundbild angezeigt wird - bis jetzt kein aufploppen mehr mit? Liegt das einfach an der wohl etwas längeren Ladezeit?

Das Problem mit dem Nav-Button hat sich übrigens gelöst...aber trotzdem muss ich ja nun irgendwie mal die .lazyload-Bilder in den Hintergrund bekommen... (das nächste Problem das ich da schon kommen sehe werden vermutlich die wechselnden Hintergründe in meinen Unterkategorien sein...)

Ich hoffe ich hab da jetzt nicht wieder ne ganze nacht umsonst dran verschwendet...



Wo finde ich mal nen richtigen Profi mit richtig Ahnung, der mir ganz genau sagen kann wie? Ich bau seit mehreren Tagen an diesem Käse herum und komme nicht ein Stück voran...das ist einfach nurnoch frustrierend. Von all der verlorenen Zeit mal ganz zu schweigen...

Das was hier jetzt so unschön im Vordergrund reinfaded muss ja irgendwie wieder in den Hintergrund, und das was im Hintergrund geladen wird muss deaktiviert werden damit es nicht doppelt geladen wird...was für ein Konstrukt...das kann so auf jeden Fall nicht richtig sein.

Ist doch drin der Link, siehe das unterstrichene "hier"

Die Kurzfassung steht in Post 1. Ohne alles zu lesen ist das nicht zu lösen.
Kurzfassung: Hintergrundbilder ploppen bei Jimdo zu spät auf - wie behebe ich das? Egal was ich versuche, nichts funktioniert. Mittlerweile ist die ganze Homepage kaputtgebastelt. Ich will einfach nur das die Bilder 101%ig sicher geladen sind bevor der Rest zu sehen ist.

Wie genau (!) funktioniert das mit dem Lazyload, besonders in anbetracht der auf verschiedenen Unterseiten wechselnden Hintergründe.


Aktueller Stand ist, das ich es mit

$('<img/>').attr('src', 'https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s4354a59fbfee63e4/backgroundarea/ibbc6b315844540a7/version/1500135545/image.jpg').on('load', function() {
            $(this).remove(); 
            $(".jtpl-background-area, .jqbga-container, .jqbga-slider--image").css('background-image', 'url(https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s4354a59fbfee63e4/backgroundarea/ibbc6b315844540a7/version/1500135545/image.jpg)');
});
 

versuche (keine Ahnung mehr wieso, stand in irgend nem anderen Forum) - ich hatte eigentlich auch den Eindruck/die Erinnerung das es funktioniert. Leider - wie bei dem Lazyload - Problem bei wechselndem Hintergrund. Wobei es interessanterweise auf dem PC zu funktionieren scheint (nicht jedoch auf dem Handy bzw sobald ich mich auf dem PC bei Jimdo im Baukasten einlogge (?!). Dann ist bei beiden links ein Teil abgeschnitten und der HG wechselt nicht so wie er soll).


Es ist einfach vollkommen frustrierend. Wieso ploppen bei Jimdo die Hintergründe zu spät auf und es lässt sich nicht einfach mit nem Window-on.load lösen? Was für ein demotivierender Stress..........das zerstört mir jede Lust daran weiterzubauen, ich brauche dringend eine funktionierende, einfache Lösung.

Edit: "CSS: display:none und jQuery .fadeIn('slow')" - da war auch irgendwas mit, ging auch nicht. Ploppten glaube ich weiterhin zu spät auf wenn ich mich recht erinner, nur eben "blass"/während des fadens

Link HIER <--

Das mit dem Preloader würd ich am liebsten streichen, blöd formuliert im Startpost - mein Problem sind die aufploppenden Hintergründe!
Hab die Seite jetzt mal wieder halbwegs repariert - aber das Problem mit den aufploppenden Hintergründen besteht weiterhin.

Sicher sind sie groß, soll ja auch ne Fotoseite werden.

Ich probiers mal ganz anders: aktuell benutz ich ein

$(window).on('load',function() {
 

. Das funktioniert nicht - die Hintergründe ploppen auf / werden von der Funktion aus irgendeinem mir unbekannten Grund (es könnte so einfach sein) nicht erfasst bzw laden davon getrennt...was auch immer.

Der Browser-Inspektor spuckt mir zum Hintergrund folgende Zeile aus:

<div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url("https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s4354a59fbfee63e4/backgroundarea/i262133c7bd677841/version/1474113351/image.jpg"); background-position: 49.4727% 91.0695%;"></div>
 

Ist es irgendwie möglich,

$(window).on('load',function() {
 

durch die JS-Tools waitforImages oder Imagesloaded zu ersetzen?
Wie genau?

$('.jtpl-background-area, .jqbga-container, .jqbga-web--image').waitForImages(true).done(function() {
 

(funktioniert nämlich nicht, wobei ich mir aber auch nicht sicher bin ob die Syntax richtig ist, ob ' und ' oder " und " oder nur eine von den 3 classes (nur welche)?)

Oder mit anderen Worten - gibt es irgendein Tool - oder überhaupt irgendeine Möglichkeit - zu erkennen ob die Hintergrundbilder fertig geladen sind? Wie genau bekomme ich .waitforImages dazu, zu erkennen ob das background-image aus Jimdos 3-er divclass geladen ist?

Diese ganzen Lazyload-Sachen oder dein Link (da ist ja nicht ein Hintergrundbild...) bringen mir augenscheinlich nichts.

Ich brauche ein Tool wie .waitforImages und eine Anleitung wie ich das mit Jimdo - bzw

<div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url("https://image.jimcdn.com/app/cms/image/transf/dimension=2000x1500:format=jpg/path/s4354a59fbfee63e4/backgroundarea/i262133c7bd677841/version/1474113351/image.jpg"); background-position: 49.4727% 91.0695%;"></div>
 

benutze.

Ich muss herausfinden ob es möglich ist bei Jimdos Hintergrundbaukasten irgendwie abzufangen ob der Hintergrund fertig geladen ist weil es mit window.onload ja offensichtlich nicht funktioniert. Und wie es funktioniert.

Hab das jetzt anders gelöst - die Dateigrösse aller Hintergrundbilder extrem verkleinert und mit

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(link.png);
}
 

siehe hier werden sie jetzt (so hoffe ich) 'korrekt' geladen. Hab den CSS-Code mit passenden Link auf jede Unterseite gesetzt, bisschen umständlich falls ich die Bilder mal ändere, aber egal, hauptsache es funktioniert.

Augenscheinlich scheint es jetzt auch zu funktionieren (das hab ich jedoch leider schon oft gedacht)...ich werd das weiter beobachten, aber bisher ist mir auf keinem meiner Testgeräte ein zu spätes aufploppen mehr aufgefallen.