2016-04-04 9 views
0

Ich habe eine Anwendung für Endbenutzer, in denen Benutzer Bilder hochladen kann. Wenn der Benutzer schwere Bilder hochlädt, wird Meine Anwendung langsam.Lazy laden Bilder mit Javascript

Wir haben Angular JS Lazy Load Images auch in einem Modul verwendet, das Bilder unterschiedlicher Größe erzeugt. https://github.com/afklm/ng-lazy-image

Und basierend auf Gerät und Bildgröße wurden Bilder vorbereitet.

Jetzt möchte ich das gleiche mit plain JavaScript-Code/Prozess/Technik tun.

Kann mich jemand führen?

Antwort

0

Ich könnte ein wenig aus dem Thema sein, aber ich würde sagen, es wäre besser, eine geänderte Version des Bildes zu dienen, das wäre weniger Bandbreite für beide Client & Server.

Es gibt viele Bibliotheken, um Bilder zu skalieren oder einfach die nativen php-Funktionen zu verwenden.

das Verfahren i bevorzugen ist: -> Bild hochgeladen -> Bilder gespeichert -> Bilder Resized & mit neuen Formatnamen gespeichert -> hängen dann davon ab, was die Benutzer wählen, senden Sie sie, dass genaues Bild

Beispiel :

hochladen Image1.jpg (1000x1000 Pixel)

-> gets Saved to '/images/Image1.jpg' 
-> User request a (let's say) 200x200 size of that image 
-> The script will resize to 200x200 and save it as Image1_200x200.jpg 
(which will have the real file size of 200x200, 
so the server will send the 200x200 image and not the 1000x1000 (original image) 

diese Weise können Sie eine Menge sparen und Bilder schneller bedienen, durch, dann können Sie von verzögertes Laden Bilder denken, die unter der Falte sind.

Ich persönlich benutze WideImage, dort ist Zebra_Image auch.

der Code für Wideimage i verwenden ist (mit Cache)

/* Merge, to get full path */ 
    $fullpath = $Path . $Filename; 
    if (!file_exists($cache_dir)) { 
     $old = umask(0); 
     mkdir($cache_dir . DS, 0775); 
     umask($old); 
    } 


    /* cache file */ 
    $cache = $cache_dir . DS . $Filename; 
/* Create Cache */ 
     if (!file_exists($cache) || $recreate === true) 
     WideImage::load($fullpath)->resize($Width, $Height, 'outside')->crop(
       'center', 'center', $Width, $Height)->saveToFile($cache, $Quality); 


    /* Return Cache filepath */ 
    return $cache; 

der $ cache ist die Datei i nach Ändern der Größe speichern.

das ist irgendwie aus dem Thema, aber ich denke, es wäre hilfreich.

Prost!