www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] How can I slow down JavaScript so it doesn't outrace itself?

Hybrid View

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687

    resolved [RESOLVED] How can I slow down JavaScript so it doesn't outrace itself?

    I've got an alert written into one of my scripts if an image doesn't load properly.

    Image failed to load (Image source: [Image File Name Here]). Click OK to try again
    The alert is found in this section of coding:

    PHP Code:
        if($orig_el_name.toLowerCase() == 'img'){
            var 
    $tries 0;
            var 
    $size = new Object();
            do{
                var 
    $orig_img = new Image();
                
    $orig_img.src $elem.getAttribute('src');
                var 
    $w $orig_img.width;
                
    $tries++;
                if(
    $w === 0){alert('Image failed to load (Image source: ' $elem.getAttribute('src') + ').  Click OK to try again');}
            }while(
    $w === && $tries 10);
            if(
    $w === && $tries == 10){
                
    alert('Image Went Bork\r\nImage Source:' $orig_img.src);
            }
            var 
    $h $orig_img.height;
            var 
    $or Number(($elem.width/$w).toFixed(2));
            var 
    $r Number(($elem.width/$w).toFixed(2));
            
    $size.w  $w ;
            
    $size.h  $h ;
            
    $size.or = $or;
            
    $size.r  $r ;
            
    $retrn.size $size;
        } 
    The variable $w is only 0 if the image for $orig_img fails to load up fast enough--and it happens EVERY TIME the page is loaded. By the time you click on the alert box, the image has loaded, and the script goes along its merry way. But how can I slow down this script WITHOUT an alert box? I do NOT want to annoy my readers, and this script is part of a larger one that lets the readers resize the image for printing.

  2. #2
    Join Date
    Apr 2012
    Posts
    22
    Set proper timeout in miliseconds so that the function executes after the web page loads.

    function checkForImage() {
    // Check code here
    setTimeout(checkForImage, 5000);
    }

    setTimeout(checkForImage, 5000);

  3. #3
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687
    EDIT: Had some of the coding wrong; my mistake.

    PHP Code:
        var $tries 0;
        function 
    GetIMG(){
            var 
    $orig_img = new Image();
            
    $orig_img.src $elem.getAttribute('src');
            var 
    $w $orig_img.width;
            if(
    $w 0){
                var 
    $size = new Object();
                var 
    $h $orig_img.height;
                var 
    $or Number(($elem.width/$w).toFixed(2));
                var 
    $r Number(($elem.width/$w).toFixed(2));
                
    $size.w  $w ;
                
    $size.h  $h ;
                
    $size.or = $or;
                
    $size.r  $r ;
                
    $retrn.size $size;
            }else if(
    $w === && $tries 10){
                
    $tries++;
                
    setTimeout(GetIMG,2000);
            } else {
                
    alert('Image Went Bork\r\nImage Source:' $orig_img.src);
            }
        }
        if(
    $orig_el_name.toLowerCase() == 'img'){
            
    GetIMG();
        } 
    The $tries variable allows the script to say, "Sorry. This image ain't loading."
    Last edited by Mr Initial Man; 04-29-2012 at 04:42 AM.

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I'm obviously late to this thread, but I think both loops and timeouts are the wrong approach. You should use events so that the image object notifies *you* when something noteworthy happens.

    Code:
    // Has it already finished trying to load?
    if (someImage.complete) {
        // Did it load successfully?
        if (someImage.naturalWidth) {
            // Success!
        } else {
            // Fail
        }
    } else {
        // Listen for success or error events
        someImage.onload = function () {
            // Success!
        };
        someImage.onerror = function () {
            // Fail
        };
    }
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687
    So you're saying that the script should only continue WHEN the image has fully loaded?

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    It seems like your script relies on the image. If that's right, then yeah, it should wait until the image is loaded. Just like you need to wait for the DOM ready event before you can safely use the DOM, you also need to wait for the image load event before you can safely use the image.

    The timeout will work, but less effectively. If you use a long timeout, such as 2 to 5 seconds, then your script may be waiting longer than it needs to. And if you use a short timeout, such as 50ms, then it'll poll many times before finally triggering the event you were waiting for.

    On the other hand, if you have the image notify you when it's ready, then there's no extra waiting and no unnecessary polling.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687
    Okay... How would you do that?

    There's a book sample on my webpage at http://www.mrinitialman.com/BookDemo/ . The pages there (in particular, Introducing (X)HTML and Dynamic Behavior and Scripting) use the script that needs the image sizes. How would you alter the script?

    The script itself is at http://www.mrinitialman.com/BookDemo...et_block_el.js

  8. #8
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Whether you use timeouts or events, the crucial factor is that the GetSelector function becomes potentially asynchronous. That means GetSelector will need a callback argument to execute when all the data is ready. You'll need to do this even if you stick with the timeout approach. When your code hits the setTimeout statement, your script doesn't pause. It'll queue the function to run again later, but in the mean time, the current invocation will continue to the return statement without the image data.

    From what I can tell, you need to 1) accept a callback argument, and 2) execute the callback once the image is verified loaded.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  9. #9
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687
    Would you show me how to set something like that up?

  10. #10
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,687
    Actually, let's start with something similar and simpler--the random comic here:

    http://coachrandom.zzl.org/

    How would I set it up so that the comic title changes when--and only when--the new image has finished loading?

    The script is at http://coachrandom.zzl.org/JavaScript/index.js

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles