Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >图片懒加载实现方式

图片懒加载实现方式

原创
作者头像
iwhao
修改于 2024-08-07 01:49:13
修改于 2024-08-07 01:49:13
20800
代码可运行
举报
运行总次数：0
代码可运行
关联问题
换一批

图片作为前端开发中不可或缺的元素，其加载速度对用户体验有着重要影响。然而，大量的图片加载不仅会消耗用户流量，还会导致页面加载缓慢，影响用户体验。为了解决这个问题，图片懒加载技术应运而生

图片懒加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载图片，即在图片即将进入可视区域时才开始加载，从而减少页面初始加载时间，提高页面响应速度。

图片懒加载的原理

图片懒加载的实现原理主要基于以下几个关键点：

  • 滚动事件监听： 图片懒加载的核心是通过监听浏览器的滚动事件（scroll事件）。当用户滚动页面时，会触发这个事件。
  • 可视区域检测： 在滚动事件触发时，需要检测每个图片元素是否已经进入或即将进入浏览器的可视区域。这通常通过以下几种方法实现：
    • 基于Element的getBoundingClientRect()方法：这个方法可以获取元素的位置和尺寸信息，通过计算元素相对于视口的位置，可以判断元素是否在可视区域内。
    • Intersection Observer API：这是一个现代的API，可以异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。它提供了更加简洁和高效的方式来监听元素是否进入可视区域。
    • 条件加载： 当检测到图片即将进入可视区域时，才开始加载这张图片。这样可以避免在页面初始加载时加载所有图片，从而减少初始加载时间和内存消耗。
    • 资源替换： 在图片检测到即将进入可视区域时，使用JavaScript动态地将图片的src属性设置为实际的图片URL。如果使用占位符（如低分辨率图片或单色图片），则在加载完成后将其替换为实际的图片资源。

实现方式

利用滚动事件监听 + getBoundingClientRect

原理： 图片dom 预先不设置src属性值，而新增自定义属性 wait-render值为true，初始化 预渲染3张，监听dom滚动事件，当到达可视范围域，开始加载图片

设置图片的 src 属性为实际图片 URL，并删除wait-render属性

使用vue3 实现，注意要点

1.滚动事件可用 @scroll监听

2.循环中的dom用ref的方式获取可以利用ref绑定一个方法，然后插入到数组中备用

3.初始化和后续监听中有重复逻辑 抽离公用设置图片setImg，参数为方法返回满足条件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div ref="scrollContainer" @scroll="lazyLoadImages" class="image-container">
    <img :ref="getImg" v-for="(image, index) in images" :key="image" :wait-render="true" alt="图片" />
  </div>
</template>

<script setup>
import {  ref } from 'vue';

const scrollContainer = ref(null);
// 存储图片数据
const images = ref([
  "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
  "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
]);
let refImgs = ref([])
//遍历获取元素，然后放在一个数组里
function getImg (el) {
  console.log('el', el)
  if (el) {
    refImgs.value.push(el)
  }
}
// 懒加载函数
const lazyLoadImages = () => {
  // 获取可视区域的高度
  const windowHeight = window.innerHeight;
  // 遍历所有图片
  setImg((image, index) => {
    let img = refImgs.value[index]
    if(!img.getAttribute('wait-render')){
      return false
    }
    // 获取图片距离视口顶部的距离
    const imgTop = img.getBoundingClientRect().top;
    if (imgTop >= windowHeight){
      return false 
    }
    // 到达可视范围域，开始加载图片
    // 设置图片的 src 属性为实际图片 URL
    return true
  })
};

const setImg = (func = () => { }) => {
  images.value.forEach((image, index) => {
    if (func(image, index)) {
      const img = refImgs.value[index]
      img.src = image;
      // 加载完成后移除 wait-render 属性
      img.removeAttribute('wait-render');
    }
  })
}
onMounted(() => {
  setImg((image, index) => {
    return index < 3
  })
});
onUnmounted(() => {
});
</script>

<style>
.image-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

img {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}
</style>

效果展示

Intersection Observer

从上图中滚动到加载图片的效果分析，看起来并不怎么丝滑，加载时机也不是很准确，以下是优化分析

  • 1.当前代码中，图片加载是按顺序进行的，这可能导致滚动到页面的底部时，页面加载速度变慢。可以考虑使用异步加载或分批加载图片，以提高用户体验。使用Intersection Observer API代替手动计算图片位置，这样可以更精确地控制图片加载时机。
  • 2.refImgs数组用于存储图片DOM元素的引用，但这个数组并不需要响应式。可以将它改为普通的JavaScript数组。（这个确实，所以考虑连这个refImgs变量声明都省了，直接用父级节点来获取子集scrollContainer.children）

修改之前 先了解下 Intersection Observer这个api

Intersection Observer API

它一个现代浏览器的API，用于异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的变化。这个API允许开发者在不使用轮询（polling）的情况下，高效地检测元素是否进入、离开或部分进入视窗。

1.基本概念
  • 目标元素（Target Element）：想要观察的元素。
  • 祖先元素（Ancestor Element）：目标元素的父元素或更上层的元素，或者是整个文档。
  • 视窗（Viewport）：浏览器窗口的可见部分。
2.事件
  • 当目标元素与视窗交叉的状态发生变化时，会触发回调函数。以下是可能发生的事件：
  • 进入视窗（Enter the viewport）：目标元素首次进入视窗。
  • 离开视窗（Leave the viewport）：目标元素完全离开视窗。
  • 部分进入视窗（Partially enter the viewport）：目标元素部分进入视窗。
3.使用方法

以下是一个简单的Intersection Observer API的使用示例：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
// 创建一个Intersection Observer实例
let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // entry.isIntersecting为true表示目标元素进入了视窗
    if (entry.isIntersecting) {
      console.log('元素已进入视窗');
      // 可以在这里执行代码，例如加载图片、显示元素等
    } else {
      console.log('元素已离开视窗');
      // 可以在这里执行代码，例如隐藏元素等
    }
  });
}, {
  // 在视窗中至少有50%的目标元素可见时触发回调
  threshold: 0.5
});

// 开始观察目标元素
observer.observe(document.getElementById('target-element'));

// 如果需要停止观察，可以调用
// observer.unobserve(document.getElementById('target-element'));

开始改造

下面利用 Intersection Observer改造后的完整代码

注意 图片要给个默认高度来撑开父级元素，否则初始化的时候图 都堆积在一起， 所以Intersection Observer会判定在可视窗口内的img 造成过度加载。就达不到想要的效果了

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div ref="scrollContainer" class="image-container">
    <img v-for="(image, index) in images" :key="index" :data-src="image" alt="图片" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([
  "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
  "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
]);
const scrollContainer = ref(null);

// Intersection Observer 用于懒加载图片
let observer = null;


function loadImage(imageElement) {
  // 使用data-src属性存储真实的图片地址
  const src = imageElement.dataset.src;
  if (src) {
    imageElement.src = src;
    imageElement.removeAttribute('data-src');
  }
}

/**
 * @param {Function} entries 一个数组，包含每个被观察元素的交叉信息。
 * @param {Number} observer IntersectionObserver 实例本身。
 */
const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
};

onMounted(() => {
  // 创建IntersectionObserver
  observer = new IntersectionObserver(observerCallback, {
    root: scrollContainer.value, // 观察目标元素
    threshold: 0.1 // 当10%的元素可见时触发回调 observerCallback
  });
  // 循环图片dom 开始观察每个图片dom是否在可视窗口 10%可见处
  images.value.forEach((image, index) => {
    const imgElement = scrollContainer.value.children[index];
    observer.observe(imgElement);   // 开始观察
  });
});

onUnmounted(() => {
  if (observer) {
    observer.disconnect(); // 停止观察所有元素
  }
});

</script>

<style>
.image-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

img {
  width: 100%;
  height: 500px;
  display: block;
  margin-bottom: 20px;
  object-fit: cover;
}
</style>

效果图

这样看起来就丝滑多了，加载时机也很准确，但每次使用 都要写这么多逻辑是不是很繁琐，用起来也不是很方便，能不能封装起来，让使用更加简洁和减少代码量书写呢，其实可以，而且不用重复造轮子，已经有成熟的组件库了，下面说一下 vue3-lazyload

vue3-lazyload

vue3-lazyload 是一个基于 Vue 3 的懒加载组件，它允许你延迟加载图片、视频或其他资源，直到它们接近或进入视口（用户可见的区域）。

这个组件库 能实现和 Intersection Observer一样的效果，而且使用非常方便，并且已经内置了加载逻辑，让代码看起来简洁很多

安装 vue3-lazyload

代码语言：shell
AI代码解释
复制
npm install vue3-lazyload

全局注册

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!--main.js-->
...
import Lazyload from "vue3-lazyload";

const app = createApp(App)
//注册插件
app.use(Lazyload, {
  loading: "@/assets/img/default.png",//可以指定加载中的图像
  error: "@/assets/img/error.png",//可以指定加载失败的图像
});
...

使用完整案例

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>
  <div class="image-container">
    <template v-for="(url, index) in images" :key="index">
      <img class="img" v-lazy="url" alt="图片" />
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([
  "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
  "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
  "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
  "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
  "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
  "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
]);


</script>

<style>
.image-container {
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
}

.img {
  width: 100%;
  height: 500px;
  display: block;
  margin-bottom: 20px;
  object-fit: cover;
}
</style>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端优化
性能优化
腾讯技术创作特训营S8

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端优化
性能优化
腾讯技术创作特训营S8
#图片懒加载
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
4005
Go 开发者必备：Protocol Buffers 入门指南
2409
10分钟带你彻底搞懂分布式链路跟踪
1662
多租户的 4 种常用方案
3517
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
2431
60页PPT全解：DeepSeek系列论文技术要点整理
3787
微信小程序开发教程-从零开始（3）
微信小程序
allluckly.cn.png 微信小程序开发教程-从零开始（1） 微信小程序开发教程-从零开始（2） 前俩章中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表，这篇文章我将讲解列表的网络请求以及网络数据的对接。 首先找到我们的index.js文件，然后看看微信小程序的网络请求文档很轻松的就可以找到我们的示例代码： wx.request({ url: 'test.php', data: { x: '' , y: '' }, header: {
Bison
2018/07/04
1.1K3
ArkUI框架开发-ImageKnife渲染层重构
移动开发harmonyosopenharmony重构
●支持用户配置参数使用：(例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
小帅聊鸿蒙
2025/04/28
910
ArkUI框架开发-ImageKnife渲染层重构
Css实战训练之图片点击放大
css
Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了，一般网站上显示的都是缩略图，等你点击缩略图之后，会在一个弹框中显示放大的图片 那么这个功能是怎么实现的呢? 正好学习了下css的基础知识
一灰灰blog
2018/04/19
11.2K1
Css实战训练之图片点击放大
Python3 bytes图片转jpg格式
python
response = http.request('GET','f.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a29f863534d9725bc315d607c8e.jpg')
用户7886150
2021/01/22
2.6K0
复盘1
网络安全css网站文件存储
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
_kyle
2020/08/24
4720
复盘1
Python-获取图片的大小
python
了解过Pillow的都知道，Pillow是一个非常强大的图片处理器，这篇文章主要记录一下Pillow对图片信息的获取：
py3study
2020/01/13
1.6K0
单页应用优化--懒加载
httpswebpack网络安全打包github
最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的Polyfill方式）
奋飛
2019/08/14
1.8K0
3.Flutter学习之Image组件
flutteriosandroid缓存dart
学习自： Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出. Flutter之path_provider
易帜
2022/02/09
1K0
3.Flutter学习之Image组件
【Web技术】771- 图片懒加载从简单到复杂
css
图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。
pingan8787
2020/11/11
9370
【Web技术】771- 图片懒加载从简单到复杂
Swift 无限轮播YLCycleViewYLMenuViewYLSinglerowView
swift
YLCycleView Swift无限轮播 如何使用？ Demo运行会报错。请你务必对demo进行 pod install YLCycleView文件夹拖入你的项目 let images = ["http://c.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f50d40bbee5fe9925bd317d8c.jpg", "1", "2", "3", "4"] let titles = ["Raindew","无限轮播", "QQ群
Raindew
2018/06/14
1.1K0
Xamarin.iOS(百分比进度条)网络图片加载
网站html5.net缓存http
SDWebImage本是ObjC的一个开源控件，在gitub上有对Xamarin的完整binding封装，同时还将其支持UIImageView/UIButton等控件的扩展方法，参考博文的功能说明（SDWebImage）：
用户1103568
2021/05/20
1.2K0
Xamarin.iOS(百分比进度条)网络图片加载
图片懒加载原理及实现(java懒加载原理)
httphttps网络安全
懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 如下图：
全栈程序员站长
2022/08/01
2K0
图片懒加载原理及实现(java懒加载原理)
实现图片懒加载
图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。
WindRunnerMax
2020/08/27
1.2K0
图片懒加载的几种实现方式
api编程算法
Lazyload 可以加快网页访问速度，减少请求，实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时，动态设置 <img> 标签的 src 属性，浏览器会根据 src 属性发送请求加载图片。
李振
2021/11/26
2.8K0
图片懒加载的几种实现方式
React图片懒加载
httpsjavareact网络安全
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125903.html原文链接：https://javaforall.cn
全栈程序员站长
2022/07/22
1.3K0
懒加载的3种实现方式
httpshtml网络安全
background-image的实现跟img的原理基本是一样的，区别是在对class的处理上：
Keller
2021/12/14
4480
图片懒加载
性能优化javascript
获取元素距离可视区域顶部的高度需要通过getBoundingClientRect() API 来实现，getBoundingClientRect() 获取的是 DOM 元素相对于窗口的坐标集合，集合中有多个属性，其中的 top 属性就是当前元素元素距离窗口可视区域顶部的距离
心安事随
2024/05/27
4420
图片懒加载
iOS异步请求下载图片
iosview程序异步
在iOS中可以这样获取一张网络图片 NSURL *url = [NSURL URLWithString:@"http://f.hiphotos.baidu.com/image/w%3D2048/sign=91c1063e1f950a7b753549c43ee963d9/f31fbe096b63f624b6a9640b8544ebf81b4ca3c6.jpg"]; NSData *data = [[NSData alloc] initWithContentsOfURL:url];
用户8983410
2021/10/29
8990
Python网络爬虫01---requests方式
缓存爬虫httphttps网络安全
网络爬虫是捜索引擎抓取系统的重要组成部分。爬虫的主要目的是将互联网上的网页下载到本地形成一个或联网内容的镜像备份。
软件架构师Michael
2022/03/01
5000
Android实现轮播图点击图片放大效果
android
最近项目中需要实现轮播图显示商品图片，当用户点击商品图片的时候，需要图片放大显示，当然用户还能进行多张图片的滑动切换，放大，缩小图片等操作，实现起来相对还是比较简单的，话不多说，咱们是用代码说话的，直接上代码。
SoullessCoder
2019/08/22
5K0
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
Android studio引用glide实现网络图片加载出现Error:Execution？如何实现图片去除网纹？储存图片用哪种储存方式好？
相关课程
Python教程-Django框架快速入门到实战数字化IT从业者知识体系微信小程序直播电商开发实践_《锋巢直播》
微信小程序开发教程-从零开始（3）
1.1K3
ArkUI框架开发-ImageKnife渲染层重构
910
Css实战训练之图片点击放大
11.2K1
Python3 bytes图片转jpg格式
2.6K0
复盘1
4720
Python-获取图片的大小
1.6K0
单页应用优化--懒加载
1.8K0
3.Flutter学习之Image组件
1K0
【Web技术】771- 图片懒加载从简单到复杂
9370
Swift 无限轮播YLCycleViewYLMenuViewYLSinglerowView
1.1K0
Xamarin.iOS(百分比进度条)网络图片加载
1.2K0
图片懒加载原理及实现(java懒加载原理)
2K0
实现图片懒加载
1.2K0
图片懒加载的几种实现方式
2.8K0
React图片懒加载
1.3K0
懒加载的3种实现方式
4480
图片懒加载
4420
iOS异步请求下载图片
8990
Python网络爬虫01---requests方式
5000
Android实现轮播图点击图片放大效果
5K0
相关推荐
微信小程序开发教程-从零开始（3）
更多 >
iwhao0
LV.3
某互联网公司前端
文章
48
获赞
77
作者相关精选
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
加入讨论
的问答专区 >
庆丰
1高级总监擅长4个领域
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1
目录
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验