Быстрые методы загрузки изображений, от низкого до высокого разрешения с несколькими фонами - решение для javascript?

Ответ 1

//
//  You have dozen of hd photos, and don't want to embed them right from the get go
//  in order to avoid 'interlaced' load, boost application load, etc.
//  Idea is to place lo-res photos, temporarily, in place where hd ones should go,
//  while downloading full quality images in the background.
//
//  People usualy do this kind of caching by attaching 'onload' event handler to off-screen
//  Image object ( created by new Image(), document.createElement('img'), or any
//  other fashion ), which gets executed natively by a browser when the event
//  ( 'onload' in this case ) occurs, and setting the '.src' property of an image to
//  the phisical path ( relative/absolute ) of an img to start the download process.
//  The script pressented here use that approach for multiple images,
//  and notifies of task done by running provided function.
//
//  So, solution is to provide locations of images you want to,
//  and get notified when they get fully downloaded, and cached by browser.
//  To do that you pass a function as 1st parameter to the fn below,
//  passing as many images as needed after it.
//
//  Code will scan through provided images keeping the ones that are actualy
//  image files( .jpeg, .png, .tiff, etc.), create 'off-screen' Image objects
//  and attach onload/onerror/onabort handler fn to each one( which will be called
//  when coresponding circumstance occurs ), and initiate loading by setting the
//  .src property of an Image object.
//
//  After the 'load-handler' has been called the number of times that coresponds to
//  number of images ( meaning the dload process is done ), script notifies you
//  of job done by running the function you provided as first argument to it,
//  additinaly passing images( that are cached and ready to go ) as
//  parameters to callback fn you supplied.
//
//  Inside the callback you do whatever you do with cached photos.
//
function hd_pics_dload( fn /* ,...hd-s */ ) {

    var
        n        = 0,   // this one is used as counter/flag to signal the download end
        P        = [],  // array to hold Image objects

                        // here goes the image filtering stuff part,
                        // all the images that pass the 'regex' test
                        // ( the ones that have valid image extension )
                        // are considerd valid, and are kept for download
        arg_imgs =  Array.prototype.filter.call(
                        Array.prototype.slice.call( arguments, 1 ),
                        function ( imgstr ) {
                            return ( /\.(?:jpe?g|jpe|png|gif|bmp|tiff?|tga|iff)$/i ).test( imgstr );
                        }
                    );


           // aborts script if no images are provided
           // runs passed function anyway

        if ( arg_imgs.length === 0 ) {
            fn.apply( document, arg_imgs );
            return arg_imgs;
        }


          // this part keeps track of number of 'load-handler' calls,
          // when 'n' hits the amount of given photos
          // provided callback is runned ( signaling load complete )
          // and whatever code is inside of it, it is executed.
          // it passes images as parameters to callback,
          // and sets it context ( this ) to document object

        var hd_imgs_load_handler = function ( e ) {

            // logs the progress to the console
            console.log( e.type, ' -- > ', this.src );

            ( ++n === arg_imgs.length )
            && fn.apply( document, arg_imgs );

        };


         // this part loops through given images,
         // populates the P[] with Image objects,
         // attaches 'hd_imgs_load_handler' event handler to each one,
         // and starts up the download thing( by setting '.src' to coresponding image path )

    for (
        var i = 0,
        len   = arg_imgs.length;
        i < len;
        i++
    ) {
        P[i] = new Image;
        P[i].onabort = hd_imgs_load_handler;
        P[i].onerror = hd_imgs_load_handler;
        P[i].onload  = hd_imgs_load_handler;
        P[i].src     = arg_imgs[i];
    }

    // it gives back images that are about to be loaded
    return arg_imgs;

}
//
// use:

hd_pics_dload(

       // 1st provide a function that will handle photos once cached
    function () { console.log('done -> ', arguments ); },

       // and provide pics, as many as needed, here
       // don't forget to separate all parameters with a comma
    'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_the_United_Nations.svg/2000px-Flag_of_the_United_Nations.svg.png',
    'http://upload.wikimedia.org/wikipedia/commons/e/e5/IBM_Port-A-Punch.jpg',
    'http://upload.wikimedia.org/wikipedia/commons/7/7e/Tim_Berners-Lee_CP_2.jpg',
    'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/2000px-NewTux.svg.png',
    'http://upload.wikimedia.org/wikipedia/commons/4/4c/Beekeeper_keeping_bees.jpg',
    'http://upload.wikimedia.org/wikipedia/commons/9/9a/100607-F-1234S-004.jpg'
);

//

Ответ 2

Вместо
- установить ширину и высоту, используя по умолчанию либо краску, либо Photoshop
- смазать изображение с помощью http://www.smushit.com/ysmush.it/

Установка ширины и высоты изображения с помощью тегов html и CSS может привести к тому, что изображение будет отображаться медленно.
Smushing - это прогрессивный инструмент Yahoo! который удаляет избыточные данные с изображения без изменения качества.

Эти методы улучшают время рендеринга изображения. Вы также можете следить за своей техникой, чтобы еще больше улучшить время загрузки изображения.

Ответ 3

//
//  here more elaborate, and user friendly, version
//  works the same as previous,
//  I've just added the possibility to subscribe funcions
//  for load/error/abort/done events separately,
//  and pass images as image array with the hash map of options to the funcion,
//  and some cleanup code to remove unnecesary function handlers
//  after download is done.
//
//  use:
//
//  cacheimages(
//      {
//          imgs    : [
//           'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_the_United_Nations.svg/2000px-Flag_of_the_United_Nations.svg.png',
//           'http://upload.wikimedia.org/wikipedia/commons/e/e5/IBM_Port-A-Punch.jpg',
//           'http://upload.wikimedia.org/wikipedia/commons/7/7e/Tim_Berners-Lee_CP_2.jpg',
//           'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/2000px-NewTux.svg.png',
//           'http://upload.wikimedia.org/wikipedia/commons/4/4c/Beekeeper_keeping_bees.jpg',
//           'http://upload.wikimedia.org/wikipedia/commons/9/9a/100607-F-1234S-004.jpg'
//          ],
//
//          load  : function () { console.log( arguments, this ); },
//            # triggered when single image is sucessfuly cached
//            # @param1, ( string ), loaded image source path
//            # @param2, ( event object ), native event object generated
//            # context ( this ), Image object, target obj related with event
//
//          error : function () { console.log( arguments, this ); },
//            # triggered when error occured when tring to download image
//            # @param1, ( string ), path to the image failed to load
//            # @param2, ( event object ), native event object describing the circumstance
//            # context ( this ), Image object, target obj related with event
//
//          abort : function () { console.log( arguments, this ); },
//            # triggered when download is haulted by user action ( browsers 'stop' button )
//            # @param1, ( string ), path to the image failed to load
//            # @param2, ( event object ), native event object generated
//            # context ( this ), Image object, target obj related with event
//
//          done  : function () { console.log( arguments, this ); }
//            # triggered after download proccess completes
//            # @params, ( string(s) ), images in question
//            # context ( this ), document
//      }
//  );
//
;(( function ( methodName, dfn ) {

  // add "cacheimages" function identifier to target context ( window )
  this[methodName] = dfn();

} ).call(
self,
"cacheimages",
function () {

    var emptyfn    = function () {};
    var isfn       = function ( o ) {
        return typeof o === "function";
    };
    var isplainobj = function ( o ) {
        return Object.prototype.toString.call( o ) === "[object Object]";
    };
    var isarray    = function ( o ) {
        return Object.prototype.toString.call( o ) === "[object Array]";
    };
    var defaults   = {
      load  : emptyfn,
      error : emptyfn,
      abort : emptyfn,
      done  : emptyfn
    };
    var imgreg     = /\.(?:jpe?g|jpe|png|gif|bmp|tiff?|tga|iff)$/i;
    var events     = ["onload", ,"onerror" ,"onabort"];

    var _F = function ( settup ) {

        if (
            isplainobj( settup )
            && (
                isarray( settup.imgs )
                && ( settup.imgs.length > 0 )
            )
        ) {

            var pics    = [];
            var n       = 0;
            var opts = {
                load  : isfn( settup.load )   ? settup.load  : defaults.load,
                error : isfn( settup.error )  ? settup.error : defaults.error,
                abort : isfn( settup.abort )  ? settup.abort : defaults.abort,
                done  : isfn( settup.done )   ? settup.done  : defaults.done,
                imgs  : settup.imgs.filter(
                          function ( imgstr ) {
                            return imgreg.test( String( imgstr ) );
                          }
                        )
            };
            var loadhandler;

            if (
                opts.imgs.length == 0
            ) {
                opts.done.call( document );
                return [];
            }

            loadhandler = function ( e ) {
                e || ( e = window.event );
                n += 1;
                if ( n < opts.imgs.length ) {
                    opts[ e.type ].call( this, this.src, e );
                    // console && console.log( e.type, ' --> [ ', this.src, ' ].' );
                } else {
                    opts.done.apply( document, opts.imgs );
                    pics.forEach(
                      function ( imgobj ) {
                        events.forEach(
                          function ( vnt ) {
                            imgobj[vnt] = null;
                          }
                        );
                      }
                    );
                }
            };

            opts.imgs.forEach(
                function ( imgstr, i ) {
                    pics[i] = new Image;
                    events.forEach(
                        function ( vnt ) {
                            pics[i][vnt] = loadhandler;
                        }
                    );
                    pics[i].src = imgstr;
                }
            );

            return opts.imgs.concat();

        } else {
            return false;
        }

    };

    return _F;

}
));

//