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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resize images before displaying them on screen

    Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.

    Does anyone know how I could make it so the images only display once they've resized ?


    Code:
    <script>
    
         window.onload = resizeimg;
        function resizeimg()
    {
     var theImages = document.getElementsByTagName('img');
     
     for( var i = 0; i < theImages.length; i++ )
     {
      im = theImages[ i ];
           
      if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
      {
       im.style.width = '466px';
       im.style.border = "1px solid #000000";
       im.style.padding = "2px";
       im.style.marginBottom = "1px";
       im.onclick = function()
       {
        window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
       }
    
       try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }
    
       im.title = 'Click Here To See Image Full Size ';
      }
     }
    }
    </script>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Instead of running the code on load, call the function at a point in the document below all <img> tags.
    That way the resizing should take place before any images load.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    That way the resizing should take place before any images load.
    This is not possible because the code accesses the width property of the images which is only available after the images finished loading.

    There is one thing you can do: Set all images to display:none and use an image preloader (search for "javascript image preload") to load all the images without displaying them. Then you can run the script to set the width/height of the images before setting them to display: inline again.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    sorry double post

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by devnull69 View Post
    This is not possible because the code accesses the width property of the images which is only available after the images finished loading.
    The code is accessing the <img> elements, whose height and width parameters determine the displayed size of the image.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    @Logic_Ali: I am not sure about that, because the OP refused to show us all of his/her code, especially the HTML. But from the description I assumed that the <img> tags don't have width or height attributes and will be stretched to their full size. That's why he/she wanted to introduce width and height to the images afterwards.

    In that case the width/height properties of the images would only be available after the images have been loaded.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So do you guys think there is a way to do it ?

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone ?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    css:
    Code:
    img {display:none;}
    .done img {display:inline; display:inline-block;}
    js
    Code:
    function resizeimg(){
      document.body.className+=" done";
     // ... same as orig
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    Code:
    function resizeimg(){
      document.body.className+=" done";
     // ... same as orig
    That works stopping the page stretching but you get no images display !!


  •  

    Posting Permissions

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