Web Analytics Made Easy -
StatCounter Resize images before displaying them on screen - CodingForum

Announcement

Collapse
No announcement yet.

Resize images before displaying them on screen

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.

    Comment


    • #3
      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.

      Comment


      • #4
        sorry double post

        Comment


        • #5
          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.

          Comment


          • #6
            @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.

            Comment


            • #7
              So do you guys think there is a way to do it ?

              Comment


              • #8
                Anyone ?

                Comment


                • #9
                  css:
                  Code:
                  img {display:none;}
                  .done img {display:inline; display:inline-block;}
                  js
                  Code:
                  function resizeimg(){
                    document.body.className+=" done";
                   // ... same as orig
                  Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

                  Comment


                  • #10
                    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 !!

                    Comment

                    Working...
                    X