使用JavaScript延迟加载图像的工作原理是什么? [英] How lazy loading images using JavaScript works?

问题描述

我很好奇延迟加载图像(滚动到图像时将加载的图像)的工作原理.

I am curious about how lazy loading images, images that will be loaded when scrolled to them, works.

有任何提示吗?

推荐答案

以下是使用插件的方法:

Here's a how-to, using plugins: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ here's the jquery plugin: http://www.appelsiini.net/projects/lazyload

基本上，您在src属性中放置了一个虚拟图像，并为实际图像添加了另一个属性，JS会检测页面的滚动位置，并在距离图像足够近时加载图像数据.通过将src替换为实际图像的来源来实现.

basically you put a dummy image in your src attribute and add another attribute for the actual image, JS detects the scroll position of the page, and loads the image data once you get close enough to the image. it does that by replacing the src with the source of the actual image.

这是另一种解释: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

这篇关于使用JavaScript延迟加载图像的工作原理是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！