使用 JavaScript 延迟加载图像是如何工作的?

问题描述

我很好奇延迟加载图像(滚动到它们时将加载的图像)如何工作.

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

有什么提示吗?

推荐答案

这是使用插件的方法:http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ 这是 jquery 插件:http://www.appelsiini.net/projects/lazyload

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 延迟加载图像是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！