jquery文件准备好的监听器与图像加载; 执行顺序

Question

I have a page where I want to display different images based on the time of day.

How I have this working now is that attached to the jquery ready listener I have a function that selects all image elements and changes their source based on the hour. Each img tag has a default src specified in the html, just in case the user has js deactivated or whatever.

With this method, however, I am paranoid that the browser starts loading the default image, then proceeds to load the time-specific image, causing unnecessary overhead.

So my question is this: if I change the img source in the jquery ready event, does the img src get changed before the browser starts loading images.

Thanks for any and all responses. I apologize if this is a duplicate question, but there are a million questions regarding the nuances of the jquery ready event.

Answer 1

I think the ready listener starts running as soon as all the html loads, meaning it will not wait for bg to load and ready will run. So depends on timing you can have default loading then getting switched.

Perhaps you can leave out the src for the image or the css for the bg and only add it with jquery in ready().

For people disabling js, you can have the default load in a noscript block

Answer 2

You can find the answer to this right in jQuery's documentation :

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed.

So once the code is there, the ready event starts running regardless of the load status of the images. This means that the image may or may not be displaying, it may be fully or partially loaded, it just depends on how quickly the image loads before the command to change it is to received.

If you wanted to be absolutely positively sure that the image never loaded, you would want to do this server-side so that only the image you wanted got written to the code--if there were some delay in the execution of the change, you would definitely see all or part of the default image.