JavaScript method that preloads image before displaying it doesn't work

Question

Within an object constructor there's a method named addToViewport(), which has the role of simply displaying an image after preloading it:

window.onload = function(){

            function ViewportObject(){
                this.src = "https://chart.googleapis.com/chart?cht=qr&chs=500x500&chl=asdasdasd&choe=UTF-8&chld=L|0";
                this.addToViewport = function(){
                    // Determine the DOM object type to create
                        var DOM_elem = "img",
                            obj = $(document.createElement(DOM_elem)),
                            img = new Object();

                            obj.addClass("object");
                            obj.css({"z-index":"100","width":"300px","height":"auto"});

                            // Preload the image before rendering it and computing its size
                            img.src = this.src;
                            img.onload = function(){

                                obj.attr("src",this.src);
                                obj.appendTo("body");
                            }                       

                }
            }

            var o = new ViewportObject();   
            o.addToViewport();
        }

The problem I've come across is that the script doesn't enter the "onload" event handler block, so the image doesn't get displayed. I put together a web page with the same script as above on http://picselbocs.com/test/ for you to check out live.

What is it that I'm doing wrong here?

Images loaded from the browser cache don't fire the .load event, which is why the jQuery docs say you shouldn't use it for images. Plugins exist to rectify this problem; see this question — Blazemonger
– Blazemonger, Commented Sep 24, 2012 at 18:37
I've tried the same thing with a different image that I had never loaded before, and the behavior is the same. This doesn't seem to have anything to do with browser caching. Or am I missing something? — Andrei Oniga
– Andrei Oniga, Commented Sep 24, 2012 at 18:39
Add the img to the DOM, with display: none;, use .load() from jQuery on the image object (selected via jQuery), then show once it's loaded? — David
– David, Commented Sep 24, 2012 at 18:40

Fresheyeball · Accepted Answer · 2012-09-24 18:49:55Z

3

Try this:

change this

img = new Object();
....
img.src = this.src;
img.onload = function(){

    obj.attr("src",this.src);
    obj.appendTo("body");
}

to

img = new Image();
....
img.onload = function(){

    obj.attr("src",this.src);
    obj.appendTo("body");
} 
img.src = this.src;

edited Sep 24, 2012 at 18:49

answered Sep 24, 2012 at 18:38

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrei Oniga Over a year ago

Actually, just switching img = new Object() to img = new Image() fixed it. I didn't realize I was creating an Object and not an Image. Silly me... Many thanks!

Fresheyeball Over a year ago

If this helped you, please hit the green checkmark next to my answer!

Andrei Oniga Over a year ago

so.com doesn't let me choose an answer within the first 10 minutes after submitting the question, so I couldn't do it sooner. Thanks again!

Fresheyeball Over a year ago

you really do want to reverse the .onload and .src commands though, it will prevent caching errors.

Collectives™ on Stack Overflow

JavaScript method that preloads image before displaying it doesn't work

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related