apending images with the width & height attr in IE

Hey guys i am test my page in IE8 and i have a small problem

the following script works in other browsers but not IE8

function preload(arrayOfImages)
{
$(arrayOfImages).each(function ()
{
$('<img />').attr('width', '100px').attr('height', '100px').attr('src',this).appendTo('#img').attr('class', 'img');
setTimeout(this, 2000);
});
}

when i run this with lets say 100 images and all the image sizes are all diffrent and above 150px*150px when this runs it will preload the images fine BUT it loads the images with their defualt width & height and not 100px*100px

any idea why this is?

Please try this:

function preload(arrayOfImages) {
$(arrayOfImages).each(function () {
$($('<img />').attr({'src':this, 'width':'100px', 'height': '100px', 'class':'img'})).appendTo($('#img'));
//setTimeout(this, 2000);
});
}


Or, if you want a jQuery plugin:

$.fn.preload = function(el,setter) {
this.each(function(){
$($('<img />').attr('src',this).attr(setter)).appendTo($(el));
});
}


// Usage:
$(['test.png','jobs.png']).preload('#img',{'width':'100px', 'height': '100px', 'class':'img'});


Hope that helps.

both worked in FF but neither worked in IE8 displayed the images but not at the width specified

I apparently don't have IE8 here for testing, but you can do it with CSS:

img.img { width: 100px; height: 100px; }

settings css is a pain but it will have to do till i found a way around it

settings css is a pain but it will have to do till i found a way around it
On the contrary, setting CSS is easier and the modern development trend is to get rid of all the HTML attributes in favor of CSS, especially CSS classes.

So: create a CSS class with the desired width and height, then append that class to your element.