图片预加载和懒加载
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
图片预加载和图片懒加载是网页优化的两种常见技术,它们可以提升用户体验并改善网页性能。
图片预加载(Image Preloading):
图片预加载是指在页面加载时提前加载图片,使其缓存在浏览器中,当用户需要查看这些图片时,可以立即显示,而不需要等待加载。这样可以提高用户的访问体验,尤其是对于包含大量图片的网站。
实现方法:
- 使用 JavaScript 预加载图片:
1 2 | var image = new Image(); image.src = 'image.jpg' ; |
- 使用 CSS 预加载图片:
1 2 3 | .preloaded-image { background-image: url( 'image.jpg' ); } |
- 通过 HTML 预加载图片:
1 | <link rel= "preload" href= "image.jpg" as = "image" > |
图片懒加载(Lazy Loading):
图片懒加载是指延迟加载图片,直到用户滚动到页面上的特定位置时才加载图片。这样可以减少页面加载时间,并且节省带宽,特别是对于长页面或包含大量图片的页面来说,可以显著提升性能。
实现方法:
-
使用 JavaScript 实现图片懒加载:
1 2 3 4 5 6 7 8 9 10 11 | document.addEventListener( "DOMContentLoaded" , function() { var lazyImages = document.querySelectorAll( "img.lazy" ); lazyImages.forEach(function(img) { if (img.getBoundingClientRect().top < window.innerHeight) { img.src = img.dataset.src; img.onload = function() { img.classList.remove( 'lazy' ); }; } }); }); |
- 使用 Intersection Observer 实现图片懒加载:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var lazyImages = document.querySelectorAll( 'img.lazy' ); var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var img = entry.target; img.src = img.dataset.src; img.onload = function() { img.classList.remove( 'lazy' ); }; observer.unobserve(img); } }); }); lazyImages.forEach(function(img) { observer.observe(img); }); |
在这两种实现方式中,图片懒加载会在用户滚动页面时自动加载图片,而不会一次性加载所有图片,从而提高页面加载速度和性能。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体