But imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox. While ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case. So the fixRedEyeCommand function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's complete property before attempting to do its work.
This is demonstrated in the code below. While you should use Intersection Observer for lazy-loading, your application requirements may be such that browser compatibility is critical. You can polyfill Intersection Observer support and this would be easiest , but you could also fall back to code using scroll , resize , and possibly orientationchange event handlers in concert with getBoundingClientRect to determine whether an element is in the viewport. Assuming the same markup pattern from before, this Glitch example uses getBoundingClientRect in a scroll event handler to check if any of img.
A setTimeout call is used to delay processing, and an active variable contains the processing state which is used to throttle function calls. As images are lazy-loaded, they're removed from the elements array. When the elements array reaches a length of 0 , the scroll event handler code is removed. While this code works in pretty much any browser, it has potential performance issues in that repetitive setTimeout calls can be wasteful, even if the code within them is throttled.
In this example, a check is being run every milliseconds on document scroll or window resize regardless of whether there's an image in the viewport or not. Plus, the tedious work of tracking how many elements are left to lazy-load and unbinding the scroll event handler are left to the developer. Simply put: Use browser-level lazy-loading with a fallback Intersection Observer implementation wherever possible, and only use event handlers if the widest possible compatibility is a critical application requirement.
Browser-level lazy-loading does not apply to CSS background images, so you need to consider other methods if you have background images to lazy-load.
When the document and CSS object models and render tree are built, the browser examines how CSS is applied to a document before requesting external resources. If the browser has determined a CSS rule involving an external resource doesn't apply to the document as it's currently constructed, the browser doesn't request it. This speculative behavior can be used to defer the loading of images in CSS by using JavaScript to determine when an element is within the viewport, and subsequently applying a class to that element that applies styling invoking a background image.
This causes the image to be downloaded at the time of need instead of at initial load. For example, let's take an element that contains a large hero background image:. You can wait for the background to load by getting the image URL and using it for an image object in javascript with an onload handler. You'd have to count the images, assign onload events and add them as new Image via JS, increment a counter as they load.
Check out this answer to a similar question :. I wrote a plugin that can fire callbacks when images have loaded in elements, or fire once per image loaded. If you only want to know when all images in content for example have loaded, this is the plugin for you. It also supports loading of images referenced in the CSS, such as background-image , list-style-image , etc.
0コメント