Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder4.news.weretis.net!newsreader4.netcologne.de!news.netcologne.de!npeer.de.kpn-eurorings.net!npeer-ng0.de.kpn-eurorings.net!newsfeed.arcor.de!newsspool3.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <2725916.yAnYnyUf7L@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <usenet@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Tue, 27 Aug 2013 23:02:47 +0200
User-Agent: KNode/4.10.5
Content-Transfer-Encoding: 8Bit
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Subject: Re: Multiple image preload construct?
Newsgroups: comp.lang.javascript
References: <kvidas$lib$1@news.albasani.net> <kvire7$ca3$1@speranza.aioe.org>
MIME-Version: 1.0
Lines: 140
NNTP-Posting-Date: 27 Aug 2013 23:04:29 CEST
NNTP-Posting-Host: 9ddc63b4.newsspool1.arcor-online.net
X-Trace: DXC=k`LDUCXbl>FA<A_d>@P]\Dic==]BZ:afN4Fo<]lROoRAnkgeX?EC@@@0E8X5N4L0EBDZm8W4\YJNLb@mF9jNikdEDZIgZChmYcK<P<m]D^VcDA
X-Complaints-To: usenet-abuse@arcor.de
Xref: csiph.com comp.lang.javascript:21059

Ken wrote:
^^^
Please fix, Ken #4711.

> On 27.08.2013 09:32, Tuxedo wrote:
>> How can this be constructed in a simple way to run the function block
>> after two images have preloaded? Eg. after:
>> preload_img.src = 'image_1.jpg' AND 'image_2.jpg';
>> .... is complete?
> 
> You need to keep track with a counter, for example:
> 
>      var images = ['img1url', 'img2url', 'img2url', ...];
> 
>      /// function to load all images in an array with urls

In these languages (not C#), documentation comments are better written
/*… */,  for “//” introduces single-line comments that are best used only 
for disabling code (and be used carefully on Usenet with its not fully 
defined line length).

>      function loadImages(imgs, callback) {
> 
>          var i = 0, img, count = imgs.length, result = [];
> 
>          /// create images
>          for(; img = imgs[i]; i++) {

That is awful code style for array iteration, in probably every language of 
the C family.  Consider this instead:

  for (var i = 0, count = len = imgs.length; i < len; ++i)
  {

>              var newImage = new Image();
>              result.push(newImage);
>              newImage.onload = handleLoad;
>              newImage.src = img;

It makes more sense to append the object reference to the Array *after* the 
object is prepared:

  var newImage = new Image();
  newImage.onload = handleLoad;
  newImage.src = img;
  result.push(newImage);

>          }
> 
>          function handleLoad() {
>              count--;
>              if (count === 0) callback(result);

Consider

  if (!--count)
  {
    callback(result);
  }

or

  if (--count === 0)
  {
    callback(result);
  }

You could also count upwards (naming the variable “loadCount”, for example).  
And you actually need only one Array, as ECMAScript Arrays are not typed by 
default:

  var img = new Image();
  …
  img.src = imgs[i];
  imgs[i] = img;

It is even questionable to have the Image instance references in an Array, 
as then there is no random access to them, for example by name or ID.

>          }
>      }
> 
> Now you can call the function:
> 
>      loadImages(myArray, loadDone);
> 
>      function loadDone(result)  {
>          console.log('All images loaded!');
>          /// result contains an array with the Image elements
>      }

Function expressions are widely supported by now, especially where 
console.log() is supported [1]:

  loadImages(myArray, function (result) {
    console.log('All images loaded!');
    /* result contains an array with the Image elements */
  });

[1] <http://PointedEars.de/es-matrix?filter=function>

Using your way is only necessary with event-handler properties, and probably 
only for *older* versions of JScript/IE (to work around the memory leak 
issue).

In your code you declare 3 global properties that should be avoided by using 
namespacing (for lack of a better word):

  var namespace = {
    …

    loadImages: function (/* … */) {
      // …
    }
  };

or, if necessary, by module pattern:

  var module = (function () {
    var _myPrivateVar;

    …

    return {
      …

      loadImages: function (/* … */) {
        // … access _myPrivateVar
      }
    };
  }());

See <http://PointeEars.de/scripts/test/hoverMe> for a better approach.  
(Although the image references are currently borken, the code should work.)

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.