Home>
<! Doctype>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <title>Image preload</title>
</head>
<body>
<Img width="300" src="http://www.google.com/img/bdlogo.gif" _src="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif "/>
</body>
</html>
<script type="text/javascript">
 //default picture
 var defurl="http://www.google.com/img/bdlogo.gif";
 //A large picture
 var imgurl="http://www.planeart.cn/demo/imgready/vistas24.jpg";
 //a gif image
 var gifurl="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif";
 //Image preloading
 function loadimage (url, callback) {
  var img=new image ();//Create an image object to implement pre-downloading of images
  img.onload=function () {
   img.onload=null;//gif images will be cycled under ie
   callback (img);
  }
  img.src=url;
 }
 var img=document.getelementbyid ("song");
 var url=img.getattribute ("_ src")
 loadimage (gifurl, function () {
  //alert ("ok");
  img.src=url;
 })
 /**
  * Universal image preload function on the network
  * @param url
  * @param callback
  * /
 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;
   };
  };
 };
 //Update:
 //05.27:1. Guarantee the execution order of callback:error>ready>load;2. callback function this points to img itself
 //04-02:1.Add callback after image is fully loaded 2.Improve performance
 /**
  * Picture header data load ready event-get picture size faster
  *
  * Principle:Without cache,Use a timer to continuously verify that the size of the image has changed.
Ready if not changing
  * If there is a cache, w3c browser will call complete, ie will go onload, neither will go to the timer part
  *
  * @version 2011.05.27
  * @author tangbin
  * @param {string} image path
  * @param {function} size ready
  * @param {function} loaded (optional)
  * @param (function) loading error (optional)
  * @example imgready ("http://www.google.com.hk/intl/zh-cn/images/logo_cn.png", function () {
alert ("size ready:width =" + this.width + ";height =" + this.height);
});
  * /
 var imgready=(function () {
  var list=[], intervalid=null,   //used to execute the queue
   tick=function () {
    var i=0;
    for (;i<list.length;i ++) {
     list [i] .end & #63;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 image is cached,Then return the cached data directly
   if (img.complete) {
    ready.call (img);
    load &&load.call (img);
    return;
   }
   ;
   width=img.width;
   height=img.height;
   //event after loading error
   img.onerror=function () {
    error &&error.call (img);
    onready.end=true;
    img=img.onload=img.onerror=null;
   };
   //Image size is ready
   onready=function () {
    newwidth=img.width;
    newheight=img.height;
    if (newwidth! == width || newheight! == height ||
     //If the image is already loaded elsewhere, use area detection
     newwidth * newheight>1024
     ) {
     ready.call (img);
     onready.end=true;
    }
    ;
   };
   onready ();
   //fully loaded event
   img.onload=function () {
     //onload may be faster than onready within the timer time difference
    //Check here and ensure that onready is executed first
    ! onready.end &&onready ();
    load &&load.call (img);
    //ie gif animation will execute onload in a loop.
    img=img.onload=img.onerror=null;
   };
    //Join the queue and execute it regularly
   if (! onready.end) {
    list.push (onready);
    //Only one timer is allowed at any time,Reduce browser performance loss
    if (intervalid === null) intervalid=setinterval (tick, 40);
   }
   ;
  };
 }) ();
 var url="http://www.planeart.cn/demo/imgready/vistas24.jpg";
 imgready (img_url, function () {
  //console.info(this.width);
  //console.info(this.height);
  alert (this.width + "\ n" + this.height);
  document.getelementbyid ("song"). src=url;
 })
</script>
  • Previous C # custom DataGridViewColumn showing TreeView
  • Next Commonly used JavaScript functions and methods for daily collection