HTML img标签
1.基本用法
<img src="kof5.jpg" alt="特瑞">
src属性为图片的链接地址，如果图片加载失败，代替图片的就是alt属性设置的文本
2.设置图片的宽高
- img标签默认的宽高就是原图的宽高
- 设置图片的宽高 （设置width属性，无需单位）
<img src="kof5.jpg" width="240" alt="特瑞">
- 通过样式进行设置
<img src="kof5.jpg" style="width:240px;" alt="特瑞">
- 优先级问题：样式的优先级高于比width属性，width属性也会被解析成样式，但是优先级低
.test{
width: 200px
}
<!-- 图片实际渲染的宽度为200px -->
<img src="timg.jpg" alt="ting" width="400" class="test">
3.获取图片宽高
- 通过img.width来获取图片真实的渲染宽度，相当于getComputedStyle的无单位版本
- img.getAttribute("width")不可取，优先级低，获取到的只是属性值，不一定是真实的渲染值
<img src="timg.jpg" alt="ting" width="400" style="width:200px">
<script>
window.onload=function(){
var img = document.querySelector('img')
console.log(getComputedStyle(img, false).width) // 200px
console.log(img.width) // 200 img元素的width属性
console.log(img.getAttribute("width")) // 400 标签的width属性
setTimeout(function(){
//修改样式
img.style.width = '300px'
//重新取值
console.log(getComputedStyle(img, false).width) // 300px
console.log(img.width) // 300 img元素的width属性
console.log(img.getAttribute("width")) // 400 标签的width属性
},3000)
}
</script>
渲染后的Dom元素：
<img src="timg.jpg" alt="ting" width="400" style="width: 300px;">
4.多图片边距的问题
- 示例：下面的代码，一行最多只能放2张图片。所以 第3，4张会自动放到下一行，不过两行之间会出现一条边距
<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
</div>
图片左边的边距是代码换行造成的，把回车当成一个字符来渲染了，相当于左右图片之间多出了一个空格
底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的，即vertical-align
解决办法一：将图片的垂直对齐方式vertical-align设置为 top 或 bottom就可以解决（默认值为baseline）
<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
</div>
- 解决办法二：而基线的位置是与字体相关的，也就是说字体越大，空隙越大。可以将字体大小设置为0,不仅可以去除底部的边距，还可以去除左边的边距
<div style="width: 490px;font-size:0px;">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
</div>
- 解决办法三：将img标签设置为块级元素（会强制换行）
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
- 解决办法四:为img设置浮动(父元素高度会坍塌，要留意这个，设置父元素overflow: hidden可以解决)
<div style="width: 490px;border:1px solid blue;margin: 50px auto;overflow: hidden;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
</div>
5.图片加载失败时img元素的大小
- img默认是行内元素，行内元素的大小由内容撑开，如果图片加载失败，撑开img元素的就只能是alt属性对应的文本值
- 但是如果将img设置为块级元素，块级元素可以设置自己的宽高，这样即使图片加载失败，也不影响img元素的大小
6.图片懒加载
- 含义：为了优化性能，我们不想一开始就加载所有的图片，而是处在屏幕内的图片就加载，屏幕之外的图片默认使用空图片或者全部使用同一张，通过事件监听，来动态加载图片
- 原生实现：通过添加loading属性，可以做到懒加载（经本人测试Chrome无效，菜鸟现成的代码也试过，无效，页面一旦加载，控制台的网络那里可以直接看见所有的图片请求，不会等到滚动才请求）
<img src="data:image.png" loading="lazy" alt="…" width="200" height="200">
<img src="data:image.png" loading="eager" alt="…" width="200" height="200">
- 实现思路如下：
- img标签初始src属性为空，或者统一指向一个url（加载依次后会被缓存，不占用资源）
- 设置data-url属性，记录此img标签目标图片地址
- 获取所有未加载图片的img元素(拥有data-url属性则表示未加载，已加载的移除此属性），监听滚动，实时计算元素是否处于屏幕中（当滚动条的距离+屏幕高度 > 元素到屏幕顶端的距离时，开始加载图片）
- 加载图片就是将src属性的值替换成data-url属性的值，同时移除data-url属性
- 代码实现：因为需要用到屏幕的高度，所以html标签的高度设置成100%
html {
height: 100%;
}
<body>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/kyo.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/lol.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/kof.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
<div class="box"><img alt="" data-url="http://127.0.0.1:8080/ra2.jpg"></div>
</body>
<script>
var throttle = new Throttle(loadImg,200)
throttle.run() //一上来先判断一次
window.addEventListener('scroll', function(){
throttle.run()
})
//创建一个节流构造函数,避免污染全局
function Throttle(cb,delay) {
this.last = 0
this.cb = cb
this.delay = delay
this.run = () => {
if(new Date().getTime() - this.last >= this.delay){
this.cb()
this.last = new Date().getTime()
}
}
}
//加载图片
function loadImg() {
//获取所有含有data-url属性的img元素（有这个属性说明未加载图片）
var imgs = document.querySelectorAll('[data-url]')
for (var i = 0; i < imgs.length; i++) {
//判断每张图片是否进入了屏幕
//如果offsetTop > 屏幕高度+垂直滚动距离 则表示无需加载，反之则加载
if (imgs[i].offsetTop < (document.documentElement.offsetHeight + document.documentElement.scrollTop)) {
//修改图片的src属性，移除data-url属性
imgs[i].src = imgs[i].getAttribute('data-url')
imgs[i].removeAttribute('data-url')
}
}
}
</script>
HTML img标签的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- 小tips：怎样实现简单的前端hash与history路由方式？
前端路由实现方式,主要有两种,分别是history和hash模式. hash模式 不同路由对应的hash是不一样的,如何能够监听到URL中关于hash部分发生的变化?浏览器已经暴露给我们一个现成的方法 ...
- 精彩回顾 | Flutter Engage China 视频合集
在上周的 Flutter Engage China 活动中,Google Flutter 团队和来自国内的开发者们共同探讨和交流 Flutter 的最新更新.实践和未来的发展.虽然只能通过线上交流,但 ...
- 贝壳找房携手 Flutter，为三亿家庭提供更好的居住服务 | Flutter 开发者故事
贝壳找房是科技驱动的新居住服务平台,致力于在二手房.新房.租房以及装修等居住领域为三亿家庭提供全方位的品质居住服务.如此庞大的用户群体,自然也有着十分多样和复杂的使用场景和需求.以往使用原生开发模式时 ...
- OpenAI 发布适用于 .NET 库的稳定版本
OpenAI 在 6 月发布测试版后发布了其官方 .NET 库的稳定版本.它以 NuGet 包的形式提供,支持 GPT-4o 和 GPT-4o mini 等最新模型,以及完整的 OpenAI REST ...
- vue 赶鸭子上架入门笔记（一） 安装开发环境
准备接手一个 vue 的前端项目,从零开始学习 vue.目标不高大上,能看得懂代码,能进行简单的修改,改完能打包和部署. 首先解决 vue 开发环境的准备.访问 Node.js 官方网站,下载适合你操 ...
- 数据库运维实操优质文章分享（含Oracle、MySQL等） | 2023年4月刊
本文为大家整理了墨天轮数据社区2023年4月发布的优质技术文章,主题涵盖Oracle.MySQL.PostgreSQL等数据库的基础安装配置.故障处理.性能优化等日常实践操作,以及概念梳理.常用脚本. ...
- iOS关于列表布局的几种实现方式小结
最近在项目开发中,遇到了常见的列表布局样式,功能的要求是最多六行,动态展示.当时想到的方案是,抽象出一个cell,初始化六个标签,动态的控制显示和隐藏,这样功能上没有问题,就是代码有些冗余.请教了身边 ...
- iOS关于七牛云项目分发遇到的问题小结
在新公司做iOS开发,目前主要是用企业开发证书通过七牛云分发的形式实现app下载.在工作过程中遇到了几个相关的问题,在这里整理一下. 1.分发的ipa包在七牛云无法正常分发安装的问题 解决方案:在七牛 ...
- apache安装详解
Apache安装 准备工作. 首先在C盘根目录下创建一个名为web的文件夹作为php开发环境的安装位置,并在web文件夹中创建apache24子文件夹,将apache解压后文件放至此处. 安装包 首先 ...
- 开源的口袋妖怪自走棋「GitHub 热点速览」
作为一名 90 后,我对口袋妖怪(宝可梦)游戏有着特殊的感情,满满的都是回忆.如果你也喜欢宝可梦主题的游戏,这款开源的宝可梦自走棋游戏 pokemonAutoChess 一定要试试,它采用战棋(自走棋 ...