html设置页面的高度和宽度,web显示页面有图像上设置高度和宽度很重要

因此即使浏览器只有HTML,它仍然能够分配适当的空间。所以我们可以修改成以下内容:

最近我们发现谷歌浏览器对图片设置有一定的修改,它主要在图像上进行设置width和设置height属性,以防止布局发生变化并改善网站访问者的体验。

Web性能倡导者经常建议开发者为图像添加尺寸,以实现最佳性能,以便在下载图像本身之前,以适当的图像空间布置页面,这样可以避免下载图像时发生版式移位。

为什么说给图片设置宽度和高度是一个很好的建议呢?

一下图是简单例子:

h1>Your titleh1>

Introductory paragraph.p>

Lorem ipsum dolor sit amet, consectetur…p>

以上例子分两个阶段进行渲染,首先是在下载HTML,然后再下载图像。使用上面的代码,这将导致主要内容在下载图像后发生加载版式移位。

fcdb974407d0ce612d929e93509ed54d.png

图片未加载不留位置

布局的变化对用户造成很大的干扰,尤其是如果你已经开始阅读文章,突然被一连串的动荡甩开了,然后你必须再次找到自己的位置。当每个图像都通过Internet到达时,这还会在浏览器上进行额外的工作以重新计算页面布局。在包含大量图像的复杂页面上,这可能会在设备上要处理很多更好的事情时给设备带来可观的负担!

避免这种情况的传统方法是在标记中提供width和height属性,

Your titleh1>

Introductory paragraph.p>

Lorem ipsum dolor sit amet, consectetur…p>

然后进行渲染,如下所示,在到达图像时为图像留出适当的空间,并且下载图像时文本不会发生剧烈的偏移:

6c70ee58fe6d5c6f12736edf2ad5c7f0.png

预留空间给图像

页面内容不断跳动对用户造成烦人的影响,更是对服务器的CPU影响相当大,所以在页面需要加载图片时,可以考虑添加高宽度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lsnrctl 与 tnsnames.ora 的联系

平台:Windoxs XPOracle 11G 当使用oralce的 Net Manager创建了一个名为“L3”的Listener后,要想使用lsnrctl启动和关闭 L3 还必须在tnsnames.ora 中配置一个名为L3的条目. listener.ora L3 (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST princess…

Java EE,Docker和Maven(技术提示#89)

Java EE应用程序通常使用Maven构建和打包。 例如&#xff0c; github.com/javaee-samples/javaee7-docker-maven是一个普通的Java EE 7应用程序&#xff0c;它显示了Java EE 7依赖性&#xff1a; <dependencies><dependency><groupId>javax</groupId>…

mysql数据库计算全部女生_使用mysql存储过程-统计某个数据库下的所有表的记录数...

使用mysql存储过程-统计某个数据库下的所有表的记录数其中用到了游标(cursor)&#xff0c;循环(loop)&#xff0c;动态SQL预处理(prepare)等技术&#xff0c;特此记录一下。[sql]viewplaincopy1.CREATEPROCEDUREstatis_rows(inv_schemavarchar(50))2.BEGIN3.4.5.DECLAREsql_str…

区县级政府网站群建设要点

区县政府单位虽小&#xff0c;但行政职能齐全&#xff0c;作为服务机构&#xff0c;公民最先接触的也是区县政府&#xff0c;大部分的群众办事在区县里就可以完成&#xff1b;上级政府部门相对于区县来说&#xff0c;管理的职能要高于服务的职能&#xff0c;所以区县对公民的重…

html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...

可以跨页面使用HTML5 Web SQL数据库吗&#xff1f;(Can HTML5 Web SQL databases be used across pages?)这可能是一个非常简单的问题&#xff0c;请原谅我的无知&#xff0c;但是可以跨同一个域的页面读取Web SQL数据库吗&#xff1f;例如&#xff0c;如果我在页面上插入数据…

如何监视Java EE数据源

介绍 FlexyPool是一个开放源代码框架&#xff0c;可以监视数据源连接的使用情况。 由于我们以前缺乏对供应连接池的支持&#xff0c;因此该工具是不必要的。 FlexyPool最初是为独立环境设计的&#xff0c;并且DataSource代理配置是通过编程完成的。 使用Spring bean别名 &…

磁盘空间管理工具FolderSizes

现在的硬盘已经到了用TB来计量的级别&#xff0c;但也会感觉在不知不觉间空间竟然不够用了&#xff01;到底什么东西占用了我们这么多的磁盘空间呢? 这个软件可以帮你快速进行分析。FolderSizes 企业版是一款优秀的磁盘管理工具&#xff0c;它可以有效地帮助我们快速的查看并统…

vscode修改python终端_panda3d是python的一个高级的3D 渲染和游戏开发框架

1 介绍1.1 开发维护者:迪士尼VR工作室和卡耐基梅隆娱乐技术中心。1.2 是一个3D游戏引擎和一个 3D 渲染和游戏开发库。1.3 可以在这个框架下使用 Python 和 C 。1.4 Panda3D 是开源软件&#xff0c; 它的许可证让它可以用于任何用途&#xff0c; 包括商业用途。1.5 是python的三…

HTMl和css项目总结,HTML+CSS项目开发总结

好几天没更新博客了&#xff0c;刚实战完一个HTMLCSS的简单项目。经过几天的摸索&#xff0c;发现收益良多。之前只是单纯得写demo&#xff0c;看知识点&#xff0c;没有亲自实战项目。但实战过后才会了解&#xff0c;如何才能更好地提升自己的技术。针对这次项目开发&#xff…

Apache Camel日志组件示例

Apache Camel日志组件示例 您要将消息记录到底层的记录机制&#xff0c;请使用骆驼的log:组件。 Camel使用sfl4j作为记录器API&#xff0c;然后允许您配置记录器实现。 在本文中&#xff0c;我们将使用Log4j作为实际的记录器机制。 让我们从示例开始。 依存关系 您需要添加&am…

HDU--4768

题目&#xff1a; Flyer 原题链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4768 分析&#xff1a;二分。只需要注意到最多只有一个为奇数&#xff0c;则可以首先求出学生获得的总的传单数&#xff0c;为奇数时&#xff0c;二分找到答案。 1 #include<cstdio&…

js return的值取不到_【JS基础】隐式转换(一)

开篇JS作为一门动态语言十分灵活&#xff0c;但是伴随而来的弱类型隐式转化的问题让我们十分头疼。隐式作为一个大课题&#xff0c;很难用一个很简短的篇幅把JS的隐式转换讲解的十分清楚。所以我选择用多次少量的策略进行梳理&#xff0c;争取让你每看完一篇都会有加深对于JS隐…

html5 loaded,How do you check if a HTML5 audio element is loaded?

问题I am wanting to know how to check if a HTML5 audio element is loaded.回答1:To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onl…

Java的坏功能是什么

总览 当您第一次学习开发时&#xff0c;您会看到关于不同功能的过分笼统的陈述&#xff0c;对于设计&#xff0c;性能&#xff0c;清晰度&#xff0c;可维护性来说&#xff0c;都是不好的&#xff0c;感觉就像是黑客&#xff0c;或者他们只是不喜欢。 这可能会得到现实世界经验…

面试题(2)

逻辑推理 1、你让工人为你工作7天&#xff0c;给工人的回报是一根金条。金条平分成相连的7段 &#xff0c;你必须在每天结束时给他们一段金条&#xff0c;如果只许你两次把金条弄断&#xff0c;你如何给你 的工人付费&#xff1f;   2、请把一盒蛋糕切成8份&#xff0c;分给8…

语句 查询每个人每个科目的最高分_转行数据分析师专栏(SQL篇)-05多表查询...

数据表&#xff08;4张&#xff09;及数据情况&#xff1a;搭建数据表数据参考&#xff1a;空杯希望&#xff1a;转行数据分析师专栏&#xff08;SQL篇&#xff09;-01SQL入门​zhuanlan.zhihu.com一、表的加法1、先新建一个表course1&#xff08;和course表数据结构一致&#…

星海中学2021高考成绩查询,广东中考时间2021

忙碌了整整一个学期&#xff0c;同学们最关心的当然是什么时候能好好的回家调节一下学习的节奏&#xff0c;一起来看看广东各个大学的寒假放假时间吧&#xff01;下面是由出国留学网小编为大家整理的“2021广东各大学寒假放假时间”&#xff0c;仅供参考&#xff0c;欢迎大家阅…

JDK 8 SummaryStatistics类

JDK 8中引入的三个新类是java.util包的DoubleSummaryStatistics &#xff0c; IntSummaryStatistics和LongSummaryStatistics 。 这些类使计算元素总数&#xff0c;元素最小值&#xff0c;元素最大值&#xff0c;元素平均值以及双精度&#xff0c;整数或long的集合中的元素总和…

plsql 设置鼠标行执行_如何制作键盘鼠标产品质量合格证

鼠标前盘属于办公用品套装&#xff0c;一般会一起销售&#xff0c;但是也不排除分开销售&#xff0c;无论是哪种方式键盘鼠标在生产销售时都需要携带对应产品质量合格证&#xff0c;对产品进行简单的说明&#xff0c;更能保障消费者的权益。那么如何制作产品质量合格证呢&#…

第四章例4-2

/* 输入一批学生的成绩&#xff0c;以负数作为结束标志&#xff0c;计算平均成绩&#xff0c;并统计不及格人数 */ #include<stdio.h> int main(void) {int count,num;double grade,total;num0;total0;count0;printf("Enter grades:");scanf_s("%lf"…