Bilder erst bei öffnen einer DIV laden

  • HTML

Es gibt 15 Antworten in diesem Thema. Der letzte Beitrag () ist von Quadsoft.

    Bilder erst bei öffnen einer DIV laden

    Hi,

    Nun, ich bastle an einer App. Diese basiert im Hintergrund auf HTML.
    Verfügbar wird diese App auf iOS, Android und evtl erweiterbar.
    Nun, ich habe SEHR VIELE Bilder zum einbinden. Doch nicht jeder hat gleich eine UMTS / 3G Antenne in der nähe, und wohl jeder kann sich vorstellen, dass 5 Minuten laden scheisse ist. *ZumGlückHabIch3G* xD
    Die App ist in verschiedene DIV's unterteilt. In diesen DIV's befindet sich je ein Bild.
    Kann ich die Bilder erst laden, wenn die DIV geöffnet wird? Ohne das man noch auf z.b "Bild anzeigen" klicken muss?

    LG Jan

    Wenn du das meinst was ich denke gehts so:

    HTML-Quellcode

    1. <div>
    2. <img src="Dein Link">
    3. </div>

    benutz jQuery:

    JavaScript-Quellcode

    1. $('div#imagecollection').click(function() {
    2. jQuery.each($('div').children('img'), function(index, object) {
    3. $(object).attr("src") = $(object).attr("srca");
    4. $(object).attr("srca", "");
    5. });
    6. });


    Irgendwie so sollte es sein.
    Und die Seite sollte so aussehen

    HTML-Quellcode

    1. <div id="imagecollection">
    2. <img srca="Dein Link" />
    3. <img srca="another image" />
    4. </div>


    Wichtig ist das srca, da wenn du auf das div clickst (nicht die unterelemente einbezogen) wird jedem unterelement vom typ "img" das attribut srca zu src (was das Bild laden lässt)

    Das ist sehr wahrscheinlich der primitivste weg.
    Wenn jemand eine bessere Lösung kennt.. :)

    BTW: Base64 hat ein kleineres charset. Also verbrauchts sogar mehr traffic.

    Bilder packst du in ein JS Array, mit einer JS Funktion machst du dann immer ein Bild weiter, dazu braucht man auch kein FW oder so.

    JavaScript-Quellcode

    1. var bilder = new Array();
    2. bilder[0] = "image1.jpg";
    3. bilder[1] = "image2.jpg";
    4. bilder[2] = "image3.jpg";
    5. bilder[3] = "image4.jpg";
    6. bilder[4] = "image5.jpg";
    8. var c = 0;
    10. function nextPic() {
    11. document.getElementById("imgTagId").src = bilder[code=c];
    12. c++;
    13. if(c > bilder.length - 1) {
    14. c = 0;
    15. }
    16. }

    1. Vergiss jQuery mal ganz schnell wieder.
    2. Apps, die nur ne WebView enthalten, sind beschissener Ranz.
    3. divs werden nicht "geöffnet". Man klickt/tippt sie an, was man durch addEventHandler abarbeiten kann. Komplett ohne Bullshit wie jQuery.

    Samus Aran schrieb:

    2. Apps, die nur ne WebView enthalten, sind beschissener Ranz.

    Ich habe immer noch selber zu entscheiden wie ich meine Apps programmiere. Wenn Apps mit ner "WebView" nur "beschissener Ranz" ist, dann ist das nicht meine Ansicht. Mir geht es in diesem Thread um konstruktive Hilfen wie von Dodo oder BeefyX aber nicht um Beleidigungen.

    /BackToThread

    Ich probiere mal n paar dinge aus :)

    Samus Aran schrieb:

    Bullshit wie jQuery.

    Ich stimme dir ja fast immer zu - aber jQuery als Ranz zu bezeichnen halte ich für sehr gewagt. Was sind deine Argumente? jQuery kann auch Dinge, die du mit HTML & CSS nicht hinkriegst. Außerdem unterstützt es Browser-Kompabilität (auch wenn dies für 1.9 nicht mehr so sein wird)...
    To make foobar2000 a real random music player, I figured out the only way to achieve this is to use Windows Media Player.

    “At some point in time, you recognize that knowing more does not necessarily make you more happy.”

    Ich hab bisher nichts gefunden, was mit jQuery deutlich einfacher als mit reinem JS wäre.
    Das seh ich auch bei den Leuten, die mit "Why not jQuery?" ankommen. Warum sollte man 50-200 KB an Ranz zusätzlich einbinden (und sich dann mit jQuerys beschissener $-Syntax auseinandersetzen), wenn man stattdessen einfach

    JavaScript-Quellcode

    1. element.addEventListener("click", function(){
    2. //do shit
    3. }, false);
    machen kann?

    tl;dr: justusejquery.com/

    Machst du so alle Funktionsaufrufe?? Find das ja nicht sehr perfomant, gerade wenn in einer Schleife geladen wird mit unterschiedlichen Parametern, da nutze ich ja eher das Attribut im Tag

    HTML-Quellcode

    1. <div onclick="meineFunktion(4, 'hallo', 'test');"></div>

    Korrekt. Genauso wie 32kB heute irrelevant sind.
    Aber mach wie du meinst ;-)

    Schon mal einen Selector in reinem JS selber geschrieben?
    Mit Cookies gearbeitet?
    Mit AJAX gearbeitet (intensiv)?

    Viel Spaß... Man benutzt Fremdbibliotheken nicht nur aus Einfachheit, sondern auch weil sie ausgiebig getestet sind und einen hohen Grad Support bieten.
    To make foobar2000 a real random music player, I figured out the only way to achieve this is to use Windows Media Player.

    “At some point in time, you recognize that knowing more does not necessarily make you more happy.”

    Mit Performance, meinte ich nicht die Ausführ Performance.

    Angenommen du hast 10 Buttons zum Löschen von Bildern in einer Galerie z.B. mit addEventListener müsste ich jetzt 10 Zeilen JS Code irgendwo noch generieren um den Buttons das click Event hinzuzufügen, das empfinde ich als unperformant.

    dachziegel5 schrieb:

    Nun, ich habe SEHR VIELE Bilder zum einbinden

    Was spricht gegen Sprite Sheets? macht amazon auch! Das meiste macht gar net das Laden/die Bildgröße selbst aus, sondern die immense anzahl an requests

Facebook
Telefonspende