SchweppesAle Posted April 21, 2009 Share Posted April 21, 2009 Hi, I have this script which pulls all images from the page, then resizes and sets their display back to inline. Unfortunately, rather than waiting for each image to load; it seems to be waiting for all of them before executing the rest of the script. I've also noticed that having a broken image on the page will cause IE to slow to a crawl. Any ideas? #center img{ display:none; visibility:hidden; } #Latest img{ visibility:hidden; display:none; } #Latest2 img{ margin-right:5px; visibility:hidden; display:none; } </style> <script language="javascript" type="text/javascript"> function checkImageSize() { if (document.getElementById('Latest2') != null) { resize_FrontAuthor(); } if (document.getElementById('Latest') != null) { resize_ListAuthors(); } resize_images(); } </script> <script language="javascript" type="text/javascript"> <!-- function resize_images() { var myDiv = document.getElementById('center'); var myImages = myDiv.getElementsByTagName("img"); for (i = 0; i < myImages.length; i++) { while ( !myImages[i].complete ) { } myImages[i].style.display = "inline"; var tempHeight = myImages[i].height; var tempWidth = myImages[i].width; if ( myImages[i].width > 300 && (myImages[i].className != 'noresize')) { var scaleheight = 300/(myImages[i].width) *(myImages[i].height); myImages[i].width = 300; myImages[i].height = scaleheight; myImages[i].style.cursor='pointer'; } myImages[i].style.visibility = "visible"; } } //--> </script> <noscript> <style type="text/css"> #center img{ visibility:visible; display:inline; max-width: 400px; width: expression(this.width > 400 ? 400: true); } </style> </noscript> <script language="javascript" type="text/javascript"> <!-- function resize_ListAuthors() { var myDiv = document.getElementById('Latest'); var myImages = myDiv.getElementsByTagName("img"); for (i = 0; i < myImages.length; i++) { while ( !myImages[i].complete ) { } myImages[i].style.display = "inline"; var tempHeight = myImages[i].height; var tempWidth = myImages[i].width; if ( myImages[i].width > 100 && (myImages[i].className != 'noresize')) { var scaleheight = 100/(myImages[i].width) *(myImages[i].height); myImages[i].width = 100; myImages[i].height = scaleheight; myImages[i].style.cursor='pointer'; } myImages[i].style.visibility = "visible"; } } //--> </script> <noscript> <style type="text/css"> #Latest img { visibility:visible; display:inline; max-width: 100px; width: expression(this.width > 400 ? 400: true); padding-right:15px; } </style> </noscript> <script language="javascript" type="text/javascript"> <!-- function resize_FrontAuthor() { var myDiv = document.getElementById('Latest2'); var myImages = myDiv.getElementsByTagName("img"); for (i = 0; i < myImages.length; i++) { while ( !myImages[i].complete ) { } myImages[i].style.display = "inline"; var tempHeight = myImages[i].height; var tempWidth = myImages[i].width; if ( myImages[i].width > 75 && (myImages[i].className != 'noresize')) { var scaleheight = 75/(myImages[i].width) *(myImages[i].height); myImages[i].width = 75; myImages[i].height = scaleheight; myImages[i].style.cursor='pointer'; } myImages[i].style.visibility = "visible"; } } //--> </script> <noscript> <style type="text/css"> #Latest2 img { visibility:visible; display:inline; max-width: 75px; width: expression(this.width > 400 ? 400: true); padding-right:15px; } </style> </noscript> Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted April 22, 2009 Share Posted April 22, 2009 what exactly is your script? Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 22, 2009 Author Share Posted April 22, 2009 what exactly is your script? it works by taking all images which I've set to display none; displays them inline, scales them down to a set size(if they're too large), then it sets their visibility property to visible. The only problem with this is that all images display simulatinously "after" the page is done loading. Is there a better way of doing this? The script is shown in my last post. Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted April 22, 2009 Share Posted April 22, 2009 The only problem with this is that all images display simulatinously "after" the page is done loading. Sorry bout that I didnt scroll down and only saw the css so thats my bad. Do you mean you want to make the pictures visable with an animation? As in slowly fade them in sequence? Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 22, 2009 Author Share Posted April 22, 2009 Not really, although that would be pretty cool. I'm really just trying to make all the images appear(resized) as they're downloaded to the user's browser. Unfortunately, the script won't set their display to inline until "all" the images are downloaded. Or at least, that's the impression I'm getting. So rather than each image appearing one by one as the page is loaded, they all appear at the same time and only if the page has finished loading all other objects. If one of our banners are taking a long time to appear because google's servers are down, the images flat out just won't show up Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 22, 2009 Author Share Posted April 22, 2009 another thing that I've noticed is that the script will actually lock up Internet Explorer if there's a broken image on the page. Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 22, 2009 Share Posted April 22, 2009 fixed: function checkImageSize() { if (document.getElementById('Latest2') !== null) { resize_FrontAuthor(); } if (document.getElementById('Latest') !== null) { resize_ListAuthors(); } resize_images(); } Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 22, 2009 Author Share Posted April 22, 2009 fixed: function checkImageSize() { if (document.getElementById('Latest2') !== null) { resize_FrontAuthor(); } if (document.getElementById('Latest') !== null) { resize_ListAuthors(); } resize_images(); } ? Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 22, 2009 Share Posted April 22, 2009 changed != to !== its more accurate than != Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 22, 2009 Author Share Posted April 22, 2009 changed != to !== its more accurate than != was that a joke or are you serious Quote Link to comment Share on other sites More sharing options...
darkfreaks Posted April 22, 2009 Share Posted April 22, 2009 run your script through jslint.com it picks it up as an error Quote Link to comment Share on other sites More sharing options...
SchweppesAle Posted April 27, 2009 Author Share Posted April 27, 2009 .... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.