javascript - 快速图像加载方法，具有多个背景的低分辨率到高分辨率 - javascript 解决方案？

Question

background-image:url('images/bg1.png'), url('images/speed/bg1.jpg');

我正在尝试利用一个元素的多个背景图像选项来加载，首先，每个背景图像的快速、低分辨率版本在加载后将被更高质量的版本替换。

有什么有效的解决方案吗？

注:以下是一厢情愿而非实际问题；我认为这可能是一个很好的主题来固定查询。

作为附带问题，有没有人知道使用这种想法的方法，而不是让图像从低分辨率过渡到渲染，并带有某种噪声效果，如果你明白我要去哪里接着就，随即。就好像每个图像都从普通噪声平滑到高清，获得分辨率，直到它在加载时达到适当的水平。

我想我的意思是:“是否可以编写一个脚本来加载单个图像作为可变噪声，随着图像加载慢慢变得清晰，而不是从上到下加载 100% 分辨率？ "

Answer 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's 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'
);

//