JavaScript: img.src = null; // To Load Or Not To Load?

February 3, 2008

Update: I am getting quite a few page views on this post (for a new blog anyway), but I don’t think it is answering what people are looking for. If you could let me know in the comments WHAT it is you were looking for, maybe I can answer it?

Don’t set image.src to null, otherwise IE tries to load the null image.

I was working on a dynamic image popup that shows a spinning icon until the actual image is loaded and among the few lines of JavaScript code I had this (for reasons not important to this discussion):

// loadImg was created earlier with document.createElement('IMG');
loadImg.src = null;

I did not think about side effects when I wrote this, but expected nothing to happen from this assignment. Turns out Internet Explorer is trying to download an image with the relative path null from the server. I found this during testing when validating expectations of connections made to the server. I guess one could argue that IE is behaving correctly and all the other browsers, which are not requesting anything, are behaving incorrectly. I am not sure. To me null means nothing, which implies that nothing gets loaded.

I changed the logic a bit and removed the offending lines. I should start tracking the amount of time I spend on fixing Internet Explorer-related issues and bill Microsoft, because it is starting to get expensive for me.

Advertisements

4 Responses to “JavaScript: img.src = null; // To Load Or Not To Load?”

  1. Nicolas Says:

    As you ask, request in google : javascript img post load

    My purpose was to do some load on demand. I have a page filled with php generated images. To reduce the load on the server, I need to load them only on demand (they are on hidden popup).

  2. amareswar Says:

    You can download the images on demand.

    For this you should not form any image tags or not use any of the image sources.

    Following code explaings about image load on demand in javascript.

    var img = new Image();
    img.onload = function() {
    //create img tag.
    }

    img.src = sourceOfImage;

  3. Kenneth Says:

    Hi, I was looking for exactly this “dynamic image popup that shows a spinning icon until the actual image is loaded”. Did you get that to work? I tried all sorts of things, but all I could get to work was a messy AJAX call.

  4. dhuv Says:

    I am also need a way to detect if the image has finished loading. I use javascript to change the src attribute and the new image does show up eventually, but the user has no idea that its happening. Let me know if there is an elegant solution (something that allows the browser to cache these images).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: