✔ Nachladen?

[YotErra]

hallo ihr super-cracker,
ich bin eine totale oldschool html und css benutzerin (php + js usw kenntnisse = null) und gerade dabei eine seite zu erstellen die für ca. 60 menschen ihre vornamen als <iframe> Youtubelinks musikalisch darstellen soll... (pro vornamen ca. 2-4 iframes incl img der leute mit diesem vornamen)
bin mittlerweile bei der noch nicht mal 20sten person und die ladezeiten sind jetzt schon makaber.... (alles mit harcore <ul> listen und <iframe>s erstellt)

habe mich in den letzten tagen in asynchrones laden, ajax und lasy loading reingelesen, verstehe tatsächlich nicht im geringsten eine vorgehensweise wie ich das ganze benutzbar bekomme ohne dass es erstmal gefühlte stunden geladen werden muss oder ich das auf einzelne html dokumente seperiere...

kann mir hier vielleicht jemand helfen? (also exakt angeben was ich genau machen muss und wo genau was vermerken damit die divs oder ul-s erst beim herunterscrollen nachgeladen werden...)

YotErra

 

[Sempervivum]

Ein Sichtbarmachen beim Scrollen ist natürlich eine Möglichkeit. Aber selbst dann dürfte es, wenn man auf der Seite unten angekommen ist, ein Problem sein, die vielen Videos gleichzeitig zu spielen und man müsste sie auch abhängig von der Scrollposition starten und stoppen. Ich würde daher auch die Alternative prüfen, zunächst nur die Namen anzuzeigen und die Bilder mit Lazy Loading. Dann über einen Button die iFrames mit den Videos sichtbar machen.

 

[YotErra]

gleichzeitig soll eigentlich nichts gespielt werden können... erst beim daraufklicken ...ich würde das ganze so gerne ohne jegliche buttons und weiter-leitungen umsetzen, hier eine sehr anfängliche anfangsversion: http://yoterra.de/team.html und dann eben noch mindestens 50 weitere namen... utopie?

 

[Sempervivum]

Sieht doch schon ganz gut aus. Inzwischen ist mir klar geworden, dass nicht nur das gleichzeitige Abspielen ein Problem ist. Das könnte man unterbinden, indem man mit der iFrame-API die anderen Videos stoppt, wenn eines gestartet wird. Aber auch wenn man das Abspielen stoppt, geht das Vorladen weiter und wenn der Benutzer bei vielen Videos das Abspielen startet, sind immer mehr am Vorladen.

Am besten machst Du dich mal mit dem Lazy Loading vertraut. Sieht generell so aus, dass zunächst nur ein Platzhalter angezeigt wird, bei jedem Bild/Video der selbe, so dass er aus dem Cache kommt und nicht vom Server geladen werden muss. Das richtige Bild/Video wird in jeweils einem Data-Attribut gespeichert. Mit Javascript prüft man die Scrollposition und ermittelt daraus, ob das Bild/Video im Browserfenster sichtbar ist. Ist das der Fall, aktiviert man das richtige Bild/Video.

 

[YotErra]

hehehehehehe (hysterisches gelächter) - das mann die videos natürlich alle gleichzeitig anspielen könnte ist mir bisher völlig entgangen. vielen dank für den iFrame-API hinweis! ich hoffe sehr das bekomme ich wirklich "mal kurz" hin (wie schon gesagt - ist nur ein hobby von mir, von programmierung null ahnung, muss mir alles beim suchen zusammenstückeln...)

die dimensionen meiner kleinen idee die ich privat als "kleinen gag mal kurz" umsetzen wollte sind eigentlich schon längst gesprengt... "Das richtige Bild/Video wird in jeweils einem Data-Attribut gespeichert. Mit Javascript prüft man die Scrollposition" das klingt total easy und schlau und erstrebenswert und im endergebnis umwerfed sexy und supergut. ich kann das allerdings nicht und würde wieder wochen brauchen um das ganze zu suchen/finden/verstehen/anwenden können... magst du mir helfen und ich suche alle lieder dieser welt mit deinem namen darin?

bin schon so zu 51% doch beim das ganze einfach in mehrere dateien zu hacken und schön mit "weiter / zurück" ... (heul: hässlich und unschlau...)
und "das ganze" ist auch schon ohne das ganze geladeproblem noch lange nicht fertig... aber ich versuche in den kommenden tagen erstmal locker flockig mit der "iFrame-API die anderen Videos" zu stoppen... bevor ich auch noch einen hinweis ala: "klickt erstmal ein video aus bevor ihr ein anderes an-macht" nennen muss...

 

[Sempervivum]

ich kann das allerdings nicht und würde wieder wochen brauchen um das ganze zu suchen/finden/verstehen/anwenden können

Für Bilder gibt es das vorgefertigt, google mal nach "javascript lazy load", dann findest Du z. B. dieses:
http://luis-almeida.github.io/unveil/
Solche Scripts sind eigentlich nicht besonders kompliziert.

 magst du mir helfen

Ich finde das Thema ganz interessant und würde dich gern unterstützen.

 

[YotErra]

10001 dank! - ich bin bis kommenden dienstag nicht am rechner und dann setze ich mich ans lazy load dran. (+ baue zuerst alle ul-listen-leute inkl iframes zusammen, das dauert schon noch... ) habe gestern nacht tatsächlich die html datei a 10 personen in mehrere dateien aufgeteilt weil ich für die ganzen checs die wartezeit schon unerträglich fand...

 

[Sempervivum]

Mir ist noch etwas eingefallen, was dir u. U. helfen kann: Ich schrieb ja oben, dass das Vorladen eines Videos weiter geht, auch wenn man das Abspielen stoppt. Eine Lösung dafür könnte sein, anstatt nur das Abspielen zu stoppen, den iFrame neu zu laden, so dass wieder der Startbildschirm mit dem großen Play-Button angezeigt wird. Ich gehe davon aus, dass in diesem Zustand kein Vorladen mehr statt findet. Zusätzlich wäre diese Lösung wahrscheinlich einfacher, als in die API von Youtube einzusteigen.

 

[YotErra]

vielen lieben dank - ich melde mich dazu auf jeden fall nochmals, ist alles wirklich neu für mich...sollte ja nur eine witzige kleinigkeit werden... eigentlich eine cd mit je einem lied pro vornamen...
werde mich erstmal in die lasy load geschichte reinfuxen. definiere die img´s auch schon über <ul class="zitty"> (vermutlich auch noch über
<div id="seite"> und <div class="ohneliste" - ich wollte es ja einfach "nur mal kurz"...)
und hoffe dass ich dies: $("img").unveil(); funktionstüchtig so locker für mich zuweisen kann

 

[Sempervivum]

Noch etwas Erfreuliches: Ich habe mal in den Code von unveil hinein gesehen und aller Voraussicht nach wird dieses Script auch für iFrames funktionieren.