www.webdeveloper.com
Results 1 to 9 of 9

Thread: What to use instead .complete property in FF

  1. #1
    Join Date
    Aug 2009
    Posts
    46

    Question What to use instead .complete property in FF

    Hi guys,

    I want to make a gallery with image loader. When image placed in JavaScript Image object finishes loading, the script includes it into HTML code and performs jQuery fadeIn effect on it.

    The '.complete' property of the Java Script 'Image' object is perfect for this purpose(recognizing when image has finished loading) but the only problem is that Mozilla Firefox doesn't recognize this property and in this browser it's always true(always loaded) even if it's not. The script works perfectly in other browsers.

    Does someone of you know what is the other way of recognizing whether the image finished loading or not?

    Thanks.

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by callMeAl View Post

    Does someone of you know what is the other way of recognizing whether the image finished loading or not?
    Apply an onload handler to each image.
    To check the loaded status of an image at a given time, you can check that its width > 0, provided that you don't reference it via an <img> tag whose width has been pre-set.
    Y_U U_G_A_E_U_ B_S_A_D_

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    You may want to revisit image.complete- it is fine in firefox

    If you load an image with an url that is not in your browser cache,
    any modern browser will return false from image.complete.

    Code:
    function isComplete(url){
        var    tem= new Image;
        tem.onload= function(){
            setTimeout(function(){
                alert(tem.src+'\nimage.complete ='+tem.complete);
            },2000);
        }
        tem.src= url;
        alert('image.complete= '+tem.complete)
    }
    Code:
    isComplete('http://imgsrc.hubblesite.org/hu/db/images/hs-2010-13-a-large_web.jpg')

  4. #4
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117

    resolved

    I remember coming up against this caching issue recently.
    Does this work for you?
    Code:
    thePic.attr("src", theURL).one('load', function (){
        $(this).fadeIn('slow');
    })

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by NicTlt View Post
    I remember coming up against this caching issue recently.
    Does this work for you?
    Code:
    thePic.attr("src", theURL).one('load', function (){
        $(this).fadeIn('slow');
    })
    Not without loading first the library's core. That is not a native JavaScript code, that is a piece of a JavaScript library/framework. Not even you have bothered to specify which library you propose: JQuery? Prototype, MooTools? Other?

  6. #6
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117
    and performs jQuery fadeIn effect on it.
    Clue's in the question...
    Here begynith a techynge of the newe Scrypte with many other helpy thynges, etc

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by NicTlt View Post
    Clue's in the question...
    Oh, I see. I make my apologies.

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    I found FF returns true for imgobj.complete if the image could not be found
    so now also check the image width is over 40

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    var img=new Image();
    img.src='fred';
    
    alert(img.complete); // IE = false, FF = true
    
    alert(img.complete&&img.width>40);// IE = false, FF = false
    
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Aug 2009
    Posts
    46
    Sorry guys for a delayed answer. I had to finish couple other projects.

    I finally solved this problem by altering my code so that it uses jQuery 'load' event. Everything is working fine now.

    I see that you have given a lot of useful information here so this topic will successfully serve as a future reference in case of problems with caching.

    Thanks!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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