Onload Issues with Opera31st of Dec 2009 - Samuli Hakoniemi

Opera Today, I read about a problem with Opera’s onload event not firing when navigating with back / forward buttons. The reason for this is that Opera receives documents directly from cache. Another, similar kind issue is related to firing onload event, when adding images dynamically. In this article, we will solve Opera’s onload issue caused by caching, and another problem, which occurs when adding images dynamically with javascript. Currently, this is tested to work with Windows versions of Opera 10.1, 10.2 and 10.5 pre-alpha. Please, give me feedback if you find issues with other versions of Opera.

How to force refreshing

This isn’t complicated at all:
if (window.opera)
{
	opera.setOverrideHistoryNavigationMode('compatible');
	history.navigationMode = 'compatible';
}

How to solve image.onload

After banging my head against wall, I found an easy solution:
var test = new Image();
if (test.addEventListener)
{
	test.addEventListener('load',function()
	{
		alert(this.width);
	}, false);
}

test.setAttribute('src','/images/test.gif');
The key is to define src attribute after you’ve bound event listeners.

Demo

You can view demo at Demo section: Onload issues with Opera

One thought on “Onload Issues with Opera

  1. samuel on said:

    Hi, I wanted to share experience I had with that issue :

    your demo worked fine on my opera 11.5 (PC),
    but my code didn’t, although the web server received the request and answered 200 OK.
    unfortunately I couldn’t figure out why, perhaps it is a cross-domain issue ? (my img was loaded from another domain)
    I’m using that code for tracking purpose (web analytics) so I don’t need to display it, I just need to be sure it is loaded.

    I then had the idea to bind the onerror event to the image : it was triggered !!!
    so the image is loaded, the answer is 200 OK, but opera fires onerror event…
    perhaps someone knows how to get a more verbose console output (like for gecko / XUL errors) …

    but my solution was here :

    var im = new Image();
    im.onload= function() {
    opera.postError(‘image loaded’);
    };
    im.onerror = im.onload;

    regards,
    sam