图片的懒加载-优快云博客

本文介绍了图片懒加载的工作原理，即通过替换初始图片为1*1px的小图，在图片进入可视区域时再加载真实图片，以此提高网页加载速度。文章详细解释了如何判断图片是否处于可视区域的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。
这就是图片懒加载。

难点

知道什么时候img在可视区域内

先了解下基本的概念
这里写图片描述

获取屏幕可视窗口大小

对应于图中1、2位置处

window.innerHeight 标准浏览器及IE9+ 
document.documentElement.clientHeight 标准浏览器及低版本IE标准模式
document.body.clientHeight 低版本混杂模式

jQuery方法： $(window).height()

浏览器窗口顶部与文档顶部之间的距离

也就是滚动条滚动的距离：也就是图中3、4处对应的位置

window.pageYOffset——IE9+及标准浏览器 || 
document.documentElement.scrollTop 兼容ie低版本的标准模式 ||
document.body.scrollTop 兼容混杂模式；

 jQuery方法：$(document).scrollTop();

获取元素尺寸

对应于图中5、6位置处
左边jquery方法，右边原生方法

注意：要使用原生的style.xxx方法获取属性，这个元素必须已经有内嵌的样式，如

；
如果原先是通过外部或内部样式表定义css样式，必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值

$(o).width() = o.style.width; 
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;