CSS background images won't load after form submit
I have a search form that, once submitted loads the results of the search query on a new page. When you press submit, however, it takes about 10 seconds or so before the next page is rendered, so I'm showing a loading box (via ExtJS) while the user waits for the next page to load.
The problem is in IE9, the border, which uses background images, isn't showing up on the loading box.
I've done some digging around, and I've concluded that for some reason IE9 will not load any of the images specified in the CSS after the form has been submitted (and the next page has begun to load).
If I use the following code to set a timeout of 200 milliseconds before the form is submitted, everything loads fine.
function() {
Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
setTimeout(f开发者_如何学编程unction() { document.getElementById('rental_increase_form').submit(); }, 200);
return false;
}
So here's my questions:
Can anyone else confirm that IE9 does not load CSS images on the current page after the next page request has begun? Is this a bug or intended functionality? Can anyone suggest a solution that doesn't involve setting a timeout before submitting a form? That solution seems a little hackish.
Don't have IE here to confirm, but can you just pre-load these images on start of the first page? E.g. make a set of hidden elements that have these background images set in their CSS. That way, you'll have the images loaded and when you show the loading box. Don't know if that is the only issue, though, but you can try to see if it works.
精彩评论