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](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) — Blazemonger, Sep 24 '12 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, Sep 24 '12 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, Sep 24 '12 at 18:40

Fresheyeball · Accepted Answer · 2012-09-24T18:49:55.380

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 '12 at 18:49

answered Sep 24 '12 at 18:38

Fresheyeball

29,567
20
102
164

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! – Andrei Oniga Sep 24 '12 at 18:43
If this helped you, please hit the green checkmark next to my answer! – Fresheyeball Sep 24 '12 at 18:49
1

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! – Andrei Oniga Sep 24 '12 at 18:54
you really do want to reverse the .onload and .src commands though, it will prevent caching errors. – Fresheyeball Sep 24 '12 at 19:41

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

1 Answers1