Imágenes que cargan rápido

Hola! Pues tengo una duda, alguien sabe por qué algunas web tienen imágenes muy pesadas que cargan de manera relativamente rápida?
Como es el caso de esta página:
http://www.miumiu.com/

El path a la foto es :
http://www.miumiu.com/images/home.jpg

Pesa alrededor de 800 kb, y si es así... alguien sabe por qué carga tan rápido?

Un saludo! Y gracias!

Angela

No veo razón específica para que eso ocurra, salvo que ya la tengas previamente en caché y cada vez que entres se cargue de tu disco duro y no del servidor, lo que disminuye notablemente el tiempo de carga.

En situaciones normales, mientras más pesado es el archivo, más se demorará en cargar.

Creo que habría que revisar detenidamente que es lo que hacen éstos java scripts:

extensions.js

Código :

var Loader = {
  _assets: $H({}),
  _checkInterval: null,
  _options: {},
  _update: function() {
    var allLoaded = true;
    Loader._assets.each(function(a){
      if(!a[1].complete && a[1].image.complete) {
        a[1].complete = true;
        a[1].completed_at = new Date().getTime();;
        if(a[1].options.onComplete) a[1].options.onComplete(a[0]);
      }
      if(!a[1].complete && !a[1].image.complete) allLoaded = false;
    });
    if(allLoaded) {
      clearInterval(Loader._checkInterval);
      Loader._checkInterval = null;
      if(Loader._options && Loader._options.onComplete) Loader._options.onComplete();
      Loader._options = null;
    }
  },
  initialize: function() {
    var options = arguments[0] || {};
    Loader._options = options;
  },
  cacheOrLoad: function(url) {
    var options = arguments[1] || {};
    if(this.isLoaded(url)) {
      if(options.onComplete) options.onComplete();
    } else {
      this.load(url, options);
    }
  },
  load: function(url) {
    if(Loader._assets[url]) return;
    var options = arguments[1] || {};
    var a = {};
    a.image = new Image();
    a.image.src = url;
    a.complete = false;
    a.options  = options;
    a.loaded_at = new Date().getTime();
    Event.observe(a.image, 'error', function(){ Loader.error(url) });
    Loader._assets[url] = a;
    if(!Loader._checkInterval) Loader._checkInterval = setInterval(Loader._update,10);
  },
  error: function(url) {
    var asset = Loader._assets[url];
    asset.complete = true;
    if(asset.options.onComplete) asset.options.onComplete('/images/empty.gif');
  },
  stats: function(url) {
    return (Loader._assets[url]._complete ?
      (Loader._assets[url]._completed_at - Loader._assets[url]._loaded_at) : null);
  },
  isQueued: function(url) {
    return !!(Loader._assets[url]);
  },
  isLoaded: function(url) {
    return (Loader._assets[url] && Loader._assets[url].complete);
  },
  reset: function() {
    Loader._assets = $H({});
  }
};

pageEvents.js

Código :

function getPageSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  
  return {width:myWidth, height:myHeight}
}



function doResize() {
   var pageDimensions = getPageSize()
   var divWidth = pageDimensions.width;
   var divHeight = pageDimensions.height - Position.page($('background-content'))[1];
   var imageHeight = pageDimensions.height - Position.page($('background-content'))[1];
   var imageWidth = pageDimensions.width;


      if (divWidth < 950) {
         divWidth = 950;   
      }
      if (divHeight < 462) {
         divHeight = 462;
         
      }

      imageWidth = imageHeight * 950/462;
      
      
      if (imageWidth < divWidth) {
         imageWidth = divWidth
         imageHeight = imageWidth * 462/950;
      }
      
      if (imageHeight < divHeight) {
         imageHeight = divHeight
         imageWidth = imageHeight * 950/462;
      }
      

   
   
   $('content').setStyle({width:divWidth - 23 + "px"})
   $('bg').setStyle({visibility:"visible"})
   $('bg').setStyle({width:imageWidth + "px"})
   $('bg').setStyle({height:imageHeight + "px"})
   $('background-content').setStyle({width:divWidth + "px"})
   $('background-content').setStyle({height:divHeight + "px"})
   $('background-content').setStyle({display:"block"})
   

}

Event.observe(window,'load',this.doResize.bindAsEventListener(window));
Event.observe(window,'resize',this.doResize.bindAsEventListener(window));

innerxhtml.js

Código :

/*
Written by Steve Tucker, 2006, http://www.stevetucker.co.uk
Full documentation can be found at http://www.stevetucker.co.uk/page-innerxhtml.php
Released under the Creative Commons Attribution-Share Alike 3.0  License, http://creativecommons.org/licenses/by-sa/3.0/

Change Log
----------
15/10/2006   v0.3   innerXHTML official release.
21/03/2007   v0.4   1. Third argument $appendage added (Steve Tucker & Stef Dawson, www.stefdawson.com)
         2. $source argument accepts string ID (Stef Dawson)
         3. IE6 'on' functions work (Stef Dawson & Steve Tucker)
*/
innerXHTML = function($source,$string,$appendage) {
   // (v0.4) Written 2006 by Steve Tucker, http://www.stevetucker.co.uk
   if (typeof($source) == 'string') $source = document.getElementById($source);
   if (!($source.nodeType == 1)) return false;
   var $children = $source.childNodes;
   var $xhtml = '';
   if (!$string) {
      for (var $i=0; $i<$children.length; $i++) {
         if ($children[$i].nodeType == 3) {
            var $text_content = $children[$i].nodeValue;
            $text_content = $text_content.replace(/</g,'&lt;');
            $text_content = $text_content.replace(/>/g,'&gt;');
            $xhtml += $text_content;
         }
         else if ($children[$i].nodeType == 8) {
            $xhtml += '<!--'+$children[$i].nodeValue+'-->';
         }
         else {
            $xhtml += '<'+$children[$i].nodeName.toLowerCase();
            var $attributes = $children[$i].attributes;
             for (var $j=0; $j<$attributes.length; $j++) {
               var $attName = $attributes[$j].nodeName.toLowerCase();
               var $attValue = $attributes[$j].nodeValue;
               if ($attName == 'style' && $children[$i].style.cssText) {
                  $xhtml += ' style="'+$children[$i].style.cssText.toLowerCase()+'"';
               }
               else if ($attValue && $attName != 'contenteditable') {
                  $xhtml += ' '+$attName+'="'+$attValue+'"';
               }
            }
            $xhtml += '>'+innerXHTML($children[$i]);
            $xhtml += '</'+$children[$i].nodeName.toLowerCase()+'>';
         }
      }
   }
   else {
      if (!$appendage) {
         while ($children.length>0) {
            $source.removeChild($children[0]);
         }
         $appendage = false;
      }
      $xhtml = $string;
      while ($string) {
         var $returned = translateXHTML($string);
         var $elements = $returned[0];
         $string = $returned[1];
         if ($elements) {
            if (typeof($appendage) == 'string') $appendage = document.getElementById($appendage);
            if (!($appendage.nodeType == 1)) $source.appendChild($elements);
            else $source.insertBefore($elements,$appendage);
         }
      }
   }
   return $xhtml;
}
function translateXHTML($string) {
   var $match = /^<\/[a-z0-9]{1,}>/i.test($string);
   if ($match) {
      var $return = Array;
      $return[0] = false;
      $return[1] = $string.replace(/^<\/[a-z0-9]{1,}>/i,'');
      return $return;
   }
   $match = /^<[a-z]{1,}/i.test($string);
   if ($match) {
      $string = $string.replace(/^</,'');
      var $element = $string.match(/[a-z0-9]{1,}/i);
      if ($element) {
         var $new_element = document.createElement($element[0]);
         $string = $string.replace(/[a-z0-9]{1,}/i,'');
         var $attribute = true;
         while ($attribute) {
            $string = $string.replace(/^\s{1,}/,'');
            $attribute = $string.match(/^[a-z1-9_-]{1,}="[^"]{0,}"/i);
            if ($attribute) {
               $attribute = $attribute[0];
               $string = $string.replace(/^[a-z1-9_-]{1,}="[^"]{0,}"/i,'');
               var $attName = $attribute.match(/^[a-z1-9_-]{1,}/i);
               $attribute = $attribute.replace(/^[a-z1-9_-]{1,}="/i,'');
               $attribute = $attribute.replace(/;{0,1}"$/,'');
               if ($attribute) {
                  var $attValue = $attribute;
                  if ($attName == 'value') $new_element.value = $attValue;
                  else if ($attName == 'class') $new_element.className = $attValue;
                  else if ($attName == 'style') {
                     var $style = $attValue.split(';');
                     for (var $i=0; $i<$style.length; $i++) {
                        var $this_style = $style[$i].split(':');
                        $this_style[0] = $this_style[0].toLowerCase().replace(/(^\s{0,})|(\s{0,1}$)/,'');
                        $this_style[1] = $this_style[1].toLowerCase().replace(/(^\s{0,})|(\s{0,1}$)/,'');
                        if (/-{1,}/g.test($this_style[0])) {
                           var $this_style_words = $this_style[0].split(/-/g);
                           $this_style[0] = '';
                           for (var $j=0; $j<$this_style_words.length; $j++) {
                              if ($j==0) {
                                 $this_style[0] = $this_style_words[0];
                                 continue;
                              }
                              var $first_letter = $this_style_words[$j].toUpperCase().match(/^[a-z]{1,1}/i);
                              $this_style[0] += $first_letter+$this_style_words[$j].replace(/^[a-z]{1,1}/,'');
                           }
                        }
                        $new_element.style[$this_style[0]] = $this_style[1];
                     }
                  }
                  else if (/^on/.test($attName)) $new_element[$attName] = function() { eval($attValue) };
                  else $new_element.setAttribute($attName,$attValue);
               }
               else $attribute = true;
            }
         }
         $match = /^>/.test($string);
         if ($match) {
            $string = $string.replace(/^>/,'');
            var $child = true;
            while ($child) {
               var $returned = translateXHTML($string,false);
               $child = $returned[0];
               if ($child) $new_element.appendChild($child);
               $string = $returned[1];
            }
         }
         $string = $string.replace(/^\/>/,'');
      }
   }
   $match = /^[^<>]{1,}/i.test($string);
   if ($match && !$new_element) {
      var $text_content = $string.match(/^[^<>]{1,}/i)[0];
      $text_content = $text_content.replace(/&lt;/g,'<');
      $text_content = $text_content.replace(/&gt;/g,'>');
      var $new_element = document.createTextNode($text_content);
      $string = $string.replace(/^[^<>]{1,}/i,'');
   }
   $match = /^<!--[^<>]{1,}-->/i.test($string);
   if ($match && !$new_element) {
      if (document.createComment) {
         $string = $string.replace(/^<!--/i,'');
         var $text_content = $string.match(/^[^<>]{0,}-->{1,}/i);
         $text_content = $text_content[0].replace(/-->{1,1}$/,'');         
         var $new_element = document.createComment($text_content);
         $string = $string.replace(/^[^<>]{1,}-->/i,'');
      }
      else $string = $string.replace(/^<!--[^<>]{1,}-->/i,'');
   }
   var $return = Array;
   $return[0] = $new_element;
   $return[1] = $string;
   return $return;
}

fonts.js

Código :

//trying to hack for safari and find dimensions after page has loaded ... still isn't working.
Event.observe(window,'load',this.loadFonts.bindAsEventListener(window));
var fontRepArray = new Array();

var FR = function(initObj){
   var defaultSwf = '/fonts/fonts.swf';
   var defaultSwfName = 'foo';
   var defaultLeading = '';
   var defaultFlashCss = '/stylesheets/flash.css';
   
   
   
   this.swf = ( typeof initObj.swf ==  "undefined"  ) ? defaultSwf: initObj.swf;
   this.swfName = ( typeof initObj.swfName ==  "undefined"  ) ? defaultSwfName : initObj.swfName;
   this.id = initObj.id;
   var dimensionObj = $(this.id).getDimensions(); 
   this.w = dimensionObj.width-8;
   this.h = dimensionObj.height;

   
   
   
   this.leading = ( typeof initObj.leading ==  "undefined" ) ? defaultLeading : initObj.leading;
   this.flashCss = ( typeof initObj.flashCss ==  "undefined" ) ? defaultFlashCss : initObj.flashCss;

   
   this.flashText = innerXHTML($(this.id));
   
   this.flashText = escape(this.flashText);
   this.flashText = ( typeof initObj.flashText == "undefined" ) ? this.flashText : escape(initObj.flashText);



   this.swfObj = new SWFObject(this.swf,this.swfName,this.w,this.h,8);
   this.swfObj.addParam("salign","lt");
   this.swfObj.addParam("align", "middle");
   this.swfObj.addParam("scale", "noscale");
   this.swfObj.addParam("wmode", "opaque");   
   this.swfObj.addVariable("copyText", encodeURIComponent(unescape(this.flashText)));
   this.swfObj.addVariable("flashCss",this.flashCss);   


}

FR.prototype.register = function() {
   


   if (!Prototype.Browser.WebKit) {
      
      this.write();
   }else {
      $(this.id).hide();
      fontRepArray.push(this);
   }
   

   

}

FR.prototype.write = function() {

   this.swfObj.write(this.id);
   
}

function loadFonts() {
   
   fontRepArray.each(function(fontRep, index) {
      $(fontRep.id).show();
                        
      dimensionObj = $(fontRep.id).getDimensions(); 
      fontRep.w = dimensionObj.width-8;
      fontRep.h = dimensionObj.height;

   
      fontRep.swfObj = new SWFObject(fontRep.swf,fontRep.swfName,fontRep.w,fontRep.h,8);
      fontRep.swfObj.addParam("salign","lt");
      fontRep.swfObj.addParam("align", "middle");
      fontRep.swfObj.addParam("scale", "noscale");
      fontRep.swfObj.addParam("wmode", "opaque");   
      fontRep.swfObj.addVariable("copyText", fontRep.flashText);
      fontRep.swfObj.addVariable("flashCss",fontRep.flashCss);   
      
      fontRep.write();
   

   });
   
   
}

No he tenido oportunidad de revisarlo profusamente, pero me da a entender que el Loader (extension.js) sería el único que potencialmente podría tener alguna relación con la imagen. Sin embargo, no veo más que una comprobación para evitar que se recargen imagen que ya se hayan cargado previamente (más o menos la idea que expuse anteriormente).