Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts

    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

    Code:
    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?
    Last edited by jordandap; 10-03-2011 at 11:36 AM.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Please try this:
    Code:
    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:
    Code:
    $.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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    both worked in FF but neither worked in IE8 displayed the images but not at the width specified

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I apparently don't have IE8 here for testing, but you can do it with CSS:
    Code:
    img.img { width: 100px; height: 100px; }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    settings css is a pain but it will have to do till i found a way around it

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by jordandap View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •