Question

I have an 10 images,
each image represents digit 0-9 in a special font (thus the images)

in order to improve performance and delay, i pre-loaded the following images like the following:

 function createDigit() {
     for (var i = 0; i < 10; i++) {
         var obj = new Image;
         obj.src = 'digit' + i + '.png';
         digitHash[i] = obj;
     }
  }

so in digit hash, i have keys indexed from 0 to 9, and each corresponding value is the image object reference, which src is mapped to the image file location.

now in my html, i have a div tag

<div id='digits'></div>

now say i want to display ‘2000’
so i have the following jquery

$('#digits').append(dightHash[2], dightHash[0], dightHash[0], dightHash[0]);

it only displays ’20’
After some debugging and printing in firefox console, i notice that it happens when you are appending the SAME image reference more than once!
in other words, the second zero and third zero in ‘2000’ are not appended and thus we only have ’20’

if i append the following:

$('#digits').append(dightHash[2], dightHash[3], dightHash[4], dightHash[5]);

i get the full display of ‘2345’, becauase there is no duplicate image reference in append

How can I resolve this issue?
is there any other than append method of jquery i can use??

Thanks

Answer 1

Yes, append actually move around your DOM, instead of automatically making copies of the object you are appending.

You can call .clone() so that appends take the copy of your image and append it instead of moving around the ref

$('#digits').append(dightHash[2], $(dightHash[0]).clone(), $(dightHash[0]).clone(), $(dightHash[0]).clone());