开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >怎么做到HTML 5图像像素化加载？

问怎么做到HTML 5图像像素化加载？

提问于 2018-02-04 18:02:07

回答 1关注 0查看 346

在我的网站上，图片是从上到下加载的，我如何改变它，使图像将载入像素化，就像在谷歌地图上放大的时候？

回答 1

我贼迷

回答已采纳

发布于 2018-02-05 03:04:11

参见：https：//www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/

下面是正在发生的事情：

呈现一个显示图像的div。使用一个填充底部介质设置为百分比，它对应于图像的纵横比。因此，当图像被加载时，它们会防止再反射，因为所有的东西都呈现在它的最后位置。这也被称为内在占位符。
加载图像的一个轻版本。目前，他们似乎在要求质量很低的小型JPEG缩略图(例如20%)。这个小图像的标记在初始HTML中作为一个HTML返回，因此浏览器立即开始获取它们。
加载图像后，就会绘制它。然后，获取图像数据并通过一个定制的blur()函数传递，可以在main-base.bundle JS文件中看到它，有点乱码。此功能与StackBlur的模糊功能相似，但不完全相同。同时，对主图像进行了请求。
一旦主图像被加载，它就会显示出来，画布被隐藏起来。

由于应用了CSS动画，所有的转换都是非常平滑的。

页面中有一个示例：

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>

或者你可以看看这个代码JMPerez为了自己重新创造效果而设置的。

和开发者交流更多问题细节吧，去写回答

相关文章

OpenCV之图像像素归一化

python代码： import cv2 as cv import numpy as np src = cv.imread("./test.png") cv.namedWindow("input", cv.WINDOW_AUTOSIZE) cv.imshow("input", src) gray = cv.cvtColor(src, cv.COLOR_BGR2GRAY) # 转换为浮点数类型数组 gray = np.float32(gray) print(gray) # scale and shift

MachineLP

2021/07/19

3860

【HTML5】图片预加载

html5 canvas getelementbyid image var

在HTML5中，我们可以使用drawImage方法在canvas上进行画图操作，其基本代码如下：

零式的天空

2022/03/02

2.8K0

Android图像处理－像素化的原理及实现

该文介绍了Android图像处理中马赛克效果的原理和实现方法，包括像素图、马赛克算法、普通图像和像素图转换、马赛克区域设置、开源项目等内容。

腾讯云开发者社区

2017/05/18

2.2K0

Android图像处理－像素化的原理及实现

html5空格代码怎么写_html怎么添加空格

html css java https 网络安全

本篇文章为大家介绍的是HTML的空格代码的写法，“&nbsp；”代码的用法，还有几种空格方式的解释，都在文章中，现在开始往下看吧。

全栈程序员站长

2022/08/02

9.3K0

html5空格代码怎么写_html怎么添加空格

OpenCV-Python学习（5）—— OpenCV 图像像素的读写操作

opencv numpy bash bash 指令编程算法

1. 学习目标图像像素的读写操作；图像像素的遍历； 2. 像素的理解像素实际大小：dpi * inches = 像素总数； ppi (pixels per inch)：图像的采样率（在图像中，每英寸所包含的像素数目） dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） 3. OpenCV 中像素灰度图像排序彩色图像排序 4. 像素的访问与赋值 4.1 获取图像维度信息；image.shape 4.1.1 灰度图像维度信息获取灰度图像维

Rattenking

2022/10/24

1.3K0

OpenCV-Python学习（5）—— OpenCV 图像像素的读写操作

HTML5 Canvas开发详解(4) -- 变形/像素操作

canvas 编程算法

注：对于Canvas来说，“状态”都必须在“动作”之前定义。在默认情况下，Canvas会把所有绘制的图形都保留下来，如果不想保留之前绘制的图形，在绘制新图形之前需要把这个Canvas清空，然后再去绘制新的图形。

爱学习的程序媛

2022/04/07

9850

HTML5 Canvas开发详解(4) -- 变形/像素操作

html css javascript 搜索引擎

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。1

Qwe7

2022/05/18

4640

图像素描风格生成

matlab https github scala

前言论文链接：Combining Sketch and Tone for Pencil Drawing Production Matlab版本的代码，目前找到有两个： 1、https://github.com/fumin/pencil 2、https://github.com/candycat1992/PencilDrawing 效果看起来第二个要好，而且写的代码非常简洁。我实现了Scala的版本(有一小部分用到了python)，基于第一个Matlab版本的代码： https://github.com

Ldpe2G

2018/07/09

1.4K0

图像素描风格生成

matlab github scala

论文链接：Combining Sketch and Tone for Pencil Drawing Production

Ldpe2G

2018/06/24

2.2K1

OpenCV之图像像素读写

python代码： import cv2 as cv src = cv.imread("./test.png") cv.namedWindow("input", cv.WINDOW_AUTOSIZE) cv.imshow("input", src) h, w, ch = src.shape print("h , w, ch", h, w, ch) for row in range(h): for col in range(w): b, g, r = src[row, col]

MachineLP

2021/07/19

2490

常用的像素操作算法：图像加法、像素混合、提取图像中的ROI

图像可以是看成是一个多维的数组。读取一张图片，可以看成是读入了一系列的像素内容。这些像素内容，按照不同的模式具有不同的格式。对于三通道的 RGB 位图来说，每个像素是一个 8-bit 整数的三元组。图像的像素操作是比较基础的图像算法，下面列举三个常用的像素操作算法。

fengzhizi715

2018/08/24

1.3K0

常用的像素操作算法：图像加法、像素混合、提取图像中的ROI

【HTML5】HTML5 语义化标签 ( HTML5 简介 | 新增特性 | 语义化标签及代码示例 )

搜索引擎 html5 开发浏览器移动端

HTML5 指的是对 HTML 语言的第五次重大修改 , 新增了新的元素 / 属性 / 行为 ;

韩曙亮

2023/04/24

2.1K0

【HTML5】HTML5 语义化标签 ( HTML5 简介 | 新增特性 | 语义化标签及代码示例 )

JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

基于HTML5 canvas 获取文本占用的像素宽度直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontStyle) { var canvas = document.createElement("canvas"); // 创建 canvas 画布 var context = canvas.getContext("2d"); // 获取 canvas 绘图上下文环境 context.font = fontStyle; // 设置字体样式，使用前设置好对应的 fo

授客

2019/12/12

2K0

HTML5 语义化 - main

早在 2013 年，<main> 元素就被正式添加到 W3C HTML 规范中，到目前位置，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么，下面就开始

用户1667431

2018/04/18

6560

HTML5 语义化 - main

HTML5 语义化标签

语义化标签可以使页面很好的呈现出内容结构和代码结构，比 div 标签有更加丰富的含义，方便开发与维护

很酷的站长

2022/12/16

1.1K0

HTML5语义化元素

语义化元素：有意义的元素。对语义化的理解：正确的标签做正确的事情； HTML5语义化元素让页面内容结构化清晰；便于开发人员阅读，理解，维护；搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键字权重，利于SEO。支持情况：IE9以上，现代浏览器！原先我们都是用这样的代码进行布局： 1 <div class="nav"></div> 2 <div class="header"></div> 3 <div class="footer"></div> 而现在，我们可以使用语义化

用户1149564

2018/01/11

1.2K0

HTML5语义化标签

， 23 2月 2021 作者 847954981@qq.com 说明补充 HTML5语义化标签 HTML5的一大特性就是标签语义化，即标签名代表各自的用处。图片  <header>header</header>  <main>  <nav>nav</nav>  <section>section</section> <section>section</s

摸鱼的G

2023/02/22

1.3K0

HTML语义化：HTML5新标签——template

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！目录一坨：二、那些年我们存放

^_^肥仔John

2018/01/18

2K0

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

用户8442333

2021/08/21

7800

图像标签 html

在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。

Qwe7

2022/05/17

6590

相似问题

AI过渡到L5架构师怎么做到最好？

123

Mysql怎么做到数据库透明加密？

01.1K

实时音视频怎么做到全平台互通？

0214

html5网页怎么在腾讯云上发布？

1712

请问用微信小程序做语音识别怎么做到流式语音识别，就是做到边说边展示数据？

1770

相关问答用户

请输入您想邀请的人

腾讯云TDP | TDP会员擅长3个领域

进击的老头子

平安资管 | 架构师擅长4个领域

擅长3个领域

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例