Lazy load images with Javascript

Question

I am having one application for end users in which user can upload images in it. When user uploads heavy images, My application becomes slow.

We have used Angular JS Lazy load images also in one module which generates different size images. https://github.com/afklm/ng-lazy-image

And based on device and image size, images was prepared.

Now I want to do same thing with plain javascript code/process/technique.

Can Anybody guide me?

score 0 · Answer 1 · answered Apr 04 '16 at 15:25

I might be a little out of subject, but i'd say it would be better to serve a resized version of the image, that would be less bandwidth for both client & server.

there are many libraries out there to resize images or just use the native php functions.

the procedure i prefer is: -> Image uploaded -> Images Saved -> Images Resized & Saved with new size name -> then depends on what the users choose, you send them that exact image

Example:

Upload Image1.jpg (1000x1000 pixels)

-> 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)

This way you save a lot and serve images faster, by then you can think of lazy loading images which are below the fold.

I personally use WideImage, there is Zebra_Image as well.

the code for WideImage i use is (with 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;

the $cache is the file i save after resizing.

that's somehow out of subject but i think it would be helpful.

Cheers!

Lazy load images with Javascript

1 Answers1