2012-03-30 5 views
2

Ich habe eine Miniaturbild-Liste, alle von ihnen haben ein Attribut von 'rel', die die Quelle des gleichen Bildes in größerer Größe ist. Meine Funktion ist einfach, wenn Sie auf ein Miniaturbild klicken, wird die größere Größe in einem Container geladen. Der interessante Teil meines Codes, die ich Ihr Feedback zu müssen, ist dies:Wie schlimm ist diese Methode zum Anfordern von Bildern anstelle von AJAX?

Die Variablen:

‚event.data.cImg‘ wird das größere Bild in dem Behälter, die ich will ‚Ereignis aktualisieren .data.cImgWrap‘ist der Behälter für das größere Bild ‚$ (this)‘ist das Thumbnail-Bild, das

event.data.cImg.attr('src', $(this).attr("rel")); 

    if (event.data.cImg.complete != 'true') { 

     event.data.cImgWrap.css('opacity', '0.7'); 

     event.data.cImg.load(function() { 
      event.data.cImgWrap.css('opacity', '1'); 
     }); 
    } 

So wurde angeklickt, was sind die Nachteile von meinem Code?

Entschuldigung für mein Englisch, ich bin kein Muttersprachler und danke im Voraus!

Antwort

1

Ich kann nicht einen Grund, wo Sie Ajax verwenden möchten, um ein Bild zu laden, es sei denn, die Bilder werden direkt in der Datenbank als Base64-codierte Daten gespeichert (und nicht jeder Browser unterstützt Daten URLs). Das DOM hat bereits alles, was Sie brauchen, um das Laden von Bildern zu "überwachen". Was ist also der Sinn, Ajax zu benutzen, um ein Bild zu bekommen? Eine einfache GET http Anfrage macht den Trick.

Das einzige, was Sie Ajax für verwenden würde, ist das Abrufen der Bild URL und Metadata wie Titel usw. aus einer Liste von Bildern über einen Webservice ... wie zuvor vorgeschlagen, wird das komplette Ereignis nicht überall unterstützt.

+0

Und nutzt GET in irgendeiner Weise besser als meine Funktion? – skywlkr

+1

Ihre Funktion verwendet bereits eine http GET-Anfrage. – mpm

+0

Ich sehe, ich dachte, du sprichst über jQuery.get(). – skywlkr

2

Nicht alle Browser unterstützen die complete Eigenschaft von Bildern.

Ich würde vorschlagen, die load Handler und die opacity vor der Änderung der src. Dann ändern Sie die src. Wenn sich das Bild bereits im Cache befindet, wird das Ereignis load sofort ausgelöst und die Deckkraft auf 1 zurückgesetzt. Wenn alles in Ordnung ist, wird der Benutzer die Opazitätsänderung nicht sehen, da dies schneller geschieht, als der Bildschirm aktualisiert wird.

Verwandte Themen