[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Coredownloadz Forum » Web developments and Ecommerce » Programming Softwares » Image preloading
Image preloading
guitarmantraDate: Thursday, 2009-06-04, 7:42 AM | Message # 1
Colonel
Group: Administrators
Messages: 220
Awards: 3
Reputation: 2
Status: Offline
The Mootools framework have a very nice image preloader. But not everyone like Mootools

Code

//this is my new preloading method
preloadImages =
{
count: 0 /* keep track of the number of images */
,loaded: 0 /* keeps track of how many images have loaded */
,onComplete: function(){} /* fires when all images have finished loadng */
,onLoaded: function(){} /*fires when an image finishes loading*/
,loaded_image: "" /*access what has just been loaded*/
,images: [] /*keeps an array of images that are loaded*/
,incoming:[] /*this is for the process queue.*/
/* this will pass the list of images to the loader*/
,queue_images: function(images)
{
//make sure to reset the counters
this.loaded = 0;

//reset the images array also
this.images = [];

//record the number of images
this.count = images.length;

//store the image names
this.incoming = images;

//start processing the images one by one
this.process_queue();
}
,process_queue: function()
{
//pull the next image off the top and load it
this.load_image(this.incoming.shift());
}
/* this will load the images through the browser */
,load_image: function(image)
{
var this_ref = this;
var preload_image = new Image;

preload_image.onload = function()
{
      //store the loaded image so we can access the new info
      this_ref.loaded_image = preload_image;

      //push images onto the stack
      this_ref.images.push(preload_image);

      //note that the image loaded
      this_ref.loaded +=1;

      //fire the onloaded
      (this_ref.onLoaded)();

      //if all images have been loaded launch the call back
      if(this_ref.count == this_ref.loaded)
      {
          (this_ref.onComplete)();
      }
      //load the next image
      else
      {
          this_ref.process_queue();
      }
}
preload_image.src = image;
}
}

To begin preloading images use the method preloadImages.queue_images([IMAGES]) where [IMAGES] is an array of images. Everything will be processed internally. There are two methods you can use: onLoaded and onComplete.

onLoaded will fire whenever an image has finished loading. All the properties of the loaded image are available in the variable loaded_image. For example if you want to find the width of the image that just finished loading your code would look like this.

Attachments: 8178716.jpg(19Kb)


www.coredownloadz.ucoz.com
 
FileServe BitShare emoticon(
talerDate: Wednesday, 2013-05-22, 3:16 PM | Message # 2
Private
Group: Users
Messages: 3
Awards: 0
Reputation: 0
Status: Offline
thx ,I need more image processing codes.

Watermark component in.NET | Image processing SDK
 
FileServe BitShare emoticon(
guitarmantraDate: Saturday, 2013-08-10, 3:46 AM | Message # 3
Colonel
Group: Administrators
Messages: 220
Awards: 3
Reputation: 2
Status: Offline
Quote talerthx ,I need more image processing codes.taler..
you can request what type of  image processing you are looking for


www.coredownloadz.ucoz.com
 
FileServe BitShare emoticon(
Coredownloadz Forum » Web developments and Ecommerce » Programming Softwares » Image preloading
Page 1 of 11
Search: