JavaScript Image Pre-loading example analysis _javascript skills

The examples in this article describe how JavaScript pictures are preloaded. Share to everyone for your reference. Specifically as follows:

Lightbox class effects use preload to center the picture and need to wait for the full load to be displayed and experience poorly (such as the full screen effect of the Filick album). JavaScript cannot get IMG header data, is that really the case? This article is an ingenious way to get JavaScript to get it.

This is an example of how most people use preload to get the size of a picture:

var imgload = function (URL, callback) {
  var img = new Image ();
  img.src = URL;
  if (img.complete) {
    callback (img.width, img.height);
  } else {
    img.onload = function () {
      callback ( Img.width, img.height);
      Img.onload = null;;};

JavaScript code:

Update://05.27:1, ensure callback execution order: error > Ready > Load;2, callback function this point to IMG itself//04-02:1, increase the picture after full load callback 2, raise high-performance/** * Picture header data Loading ready Events-Get picture size faster * @version 2011.05.27 * <a href= "Http://my.oschina.net/arthor" class= "referer" target= "_blank" > @auth Or</a> Tangbin * <a href= "Http://my.oschina.net/see" class= "referer" target= "_blank" > @see </a> http  ://www.planeart.cn/?p=1121 * @param {String} picture path * @param {function} dimension ready * @param {function} loaded (optional) * @param {Function} load error (optional) * @example imgready (' Yun_qi_img/logo_cn.png ', Function () {alert (' size ready:width= ' + THIS.W Idth + ';
  Height= ' + this.height);
 });
    * * var Imgready = (function () {var list = [], intervalid = NULL,//used to execute queue tick = function () {var i = 0;
    for (; i < list.length; i++) {list[i].end List.splice (i--, 1): List[i] ();
    };
  !list.length && Stop ();
    //Stop all timer queues stop = function () {clearinterval (intervalid);
 Intervalid = null; };
    return function (URL, ready, load, error) {var onready, width, height, newwidth, newheight, img = new Image ();
    img.src = URL;
      If the picture is cached, it returns the cached data directly if (Img.complete) {Ready.call (IMG);
      Load && load.call (IMG);
    Return
    };
    width = img.width;
    Height = img.height;
      Event Img.onerror = function () {Error && Error.call (IMG) After loading error
      Onready.end = true;
    img = img.onload = Img.onerror = null;
    };
      Picture size Ready Onready = function () {newwidth = Img.width;
      Newheight = Img.height;
        if (newwidth!== width | | | newheight!== Height | |
        If the picture has been loaded elsewhere the usable area detects Newwidth * newheight > 1024) {ready.call (IMG);
      Onready.end = true;
    };
    };
    Onready (); Fully Loaded event Img.onload = function () {//onload may be inspected in the timer time difference than onready fast//here and ensure that Onready priority is enforced!onre
      Ady.end && Onready (); Load && Load.call(IMG);
    IE gif animation will loop to execute onload, empty onload can be img = img.onload = Img.onerror = null;
    };
      Join the queue to execute the IF (!onready.end) {List.push (onready) periodically;
    Whenever only one timer is allowed, reduce browser performance loss if (Intervalid = = null) Intervalid = SetInterval (tick, 40);
  };
};

 })();

Call Example:

Imgready (' Yun_qi_img/logo_cn.png ', function () {
  alert (' Size ready:width= ' + this.width + '; height= ' + this.height);
});

I hope this article will help you with your JavaScript programming.