javascript - What is the difference between Img.complete and img.onload to determine when the image is loaded?

Question

What is the difference between the two to determine whether the image is loaded? Generally, the onload event will be called back when the loading is completed. Is img.complete still necessary?

Answer 1

img.complete is a property of the Image object and returns a Boolean value; img.onload is an event triggered after the image is loaded

Answer 2

Of the two, only img.complete can determine whether the image has been loaded. img.onload cannot determine whether the image has been loaded. Instead, after the loading is completed, the function bound to onload is directly run.

Answer 3

complete is just an attribute of the HTMLImageElement object, while onload is the load event callback of the Image object. The former cannot accurately perform asynchronous callbacks when the event occurs and has some issues with browser compatibility.

Answer 4

The onload property of the GlobalEventHandlers mixin is an event handler for the load event of a Window, XMLHttpRequest, <img> element, etc., which fires when the resource has loaded.
The onload event will be released when img is loaded, src The image is loaded asynchronously. If the loading is completed before the binding event, the onload event will not be triggered.
img.complete is a property that always exists and is true after loading is complete.