Metody szybkiego ładowania obrazów, od niskiej do wysokiej rozdzielczości z wieloma środowiskami - rozwiązanie javascript?

Question

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

Próbuję skorzystać z opcji wielu obrazów tła dla załadowanego elementu, po pierwsze, szybka wersja o niskiej rozdzielczości każdego obrazu tła zostanie zastąpiona wersją o wyższej jakości po wczytaniu .

Jakieś skuteczne rozwiązania?

Uwaga: poniższe zdanie jest bardziej życzeniowe niż prawdziwe; Pomyślałem, że to może być dobry temat, do którego należy kierować zapytanie.

Jako pytanie uboczne, czy ktoś wie o metodzie użycia tego rodzaju pomysłu, zamiast tego ma przejście obrazu do renderowania z niskiej do wysokiej rozdzielczości, z pewnym rodzajem efektu szumu, jeśli widzisz, gdzie ja " Idę z tym. Byłoby tak, jakby każdy obraz był wygładzony od zwykłego szumu do HD, uzyskując rozdzielczość, dopóki nie osiągnie właściwego poziomu, gdy się załaduje.

Domyślam się, że dostaję się: "Czy można napisać skrypt, aby załadować pojedynczy obraz jako zmienny szum powoli przybierający klarowność podczas ładowania obrazu, zamiast ładowania 100% rozdzielczości z góry na dół?"

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

// 

Answer 2

Zamiast
- ustawić szerokość i wysokość użyciu domyślnego albo farby lub Photoshop
- smush obraz korzystając http://www.smushit.com/ysmush.it/

Ustawianie szerokości obrazu & wysokość za pomocą znaczników HTML & CSS może spowolnić renderowanie obrazu.
Smushing to progresywne narzędzie firmy Yahoo! który usuwa nadmiarowe dane z obrazu bez zmiany jakości.

Te techniki poprawiają czas renderowania obrazu. Możesz także zastosować technikę, aby jeszcze bardziej poprawić czas ładowania obrazu.

Answer 3

// 
// here's 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; 

} 
)); 

//