HTML img標(biāo)簽
1.基本用法
- src屬性為圖片的鏈接地址，如果圖片加載失敗，代替圖片的就是alt屬性設(shè)置的文本
<img src="kof5.jpg" alt="特瑞">
2.設(shè)置圖片的寬高
- img標(biāo)簽?zāi)J(rèn)的寬高就是原圖的寬高
- 設(shè)置圖片的寬高 （設(shè)置width屬性，無需單位）
<img src="kof5.jpg" width="240" alt="特瑞">
- 通過樣式進(jìn)行設(shè)置
<img src="kof5.jpg" style="width:240px;" alt="特瑞">
- 優(yōu)先級(jí)問題：樣式的優(yōu)先級(jí)高于比width屬性，width屬性也會(huì)被解析成樣式，但是優(yōu)先級(jí)低
.test{
width: 200px
}
<!-- 圖片實(shí)際渲染的寬度為200px -->
<img src="timg.jpg" alt="ting" width="400" class="test">
3.獲取圖片寬高
- 通過img.width來獲取圖片真實(shí)的渲染寬度，相當(dāng)于getComputedStyle的無單位版本
- img.getAttribute("width")不可取，優(yōu)先級(jí)低，獲取到的只是屬性值，不一定是真實(shí)的渲染值
<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 標(biāo)簽的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 標(biāo)簽的width屬性
},3000)
}
</script>
渲染后的Dom元素：
<img src="timg.jpg" alt="ting" width="400" style="width: 300px;">
4.多圖片邊距的問題
- 示例：下面的代碼，一行最多只能放2張圖片。所以 第3，4張會(huì)自動(dòng)放到下一行，不過兩行之間會(huì)出現(xiàn)一條邊距
<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>
-
圖片左邊的邊距是代碼換行造成的，把回車當(dāng)成一個(gè)字符來渲染了，相當(dāng)于左右圖片之間多出了一個(gè)空格
-
底部的空隙實(shí)際上涉及行內(nèi)元素的布局模型，圖片默認(rèn)的垂直對(duì)齊方式是基線，而基線的位置是與字體相關(guān)的，即vertical-align
-
解決辦法一：將圖片的垂直對(duì)齊方式vertical-align設(shè)置為 top 或 bottom就可以解決（默認(rèn)值為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>
- 解決辦法二：而基線的位置是與字體相關(guān)的，也就是說字體越大，空隙越大。可以將字體大小設(shè)置為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標(biāo)簽設(shè)置為塊級(jí)元素（會(huì)強(qiáng)制換行）
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
- 解決辦法四:為img設(shè)置浮動(dòng)(父元素高度會(huì)坍塌，要留意這個(gè)，設(shè)置父元素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.圖片加載失敗時(shí)img元素的大小
- img默認(rèn)是行內(nèi)元素，行內(nèi)元素的大小由內(nèi)容撐開，如果圖片加載失敗，撐開img元素的就只能是alt屬性對(duì)應(yīng)的文本值
- 但是如果將img設(shè)置為塊級(jí)元素，塊級(jí)元素可以設(shè)置自己的寬高，這樣即使圖片加載失敗，也不影響img元素的大小
6.圖片懶加載
- 含義：為了優(yōu)化性能，我們不想一開始就加載所有的圖片，而是處在屏幕內(nèi)的圖片就加載，屏幕之外的圖片默認(rèn)使用空?qǐng)D片或者全部使用同一張，通過事件監(jiān)聽，來動(dòng)態(tài)加載圖片
- 原生實(shí)現(xiàn)：通過添加loading屬性，可以做到懶加載（經(jīng)本人測(cè)試Chrome無效，菜鳥現(xiàn)成的代碼也試過，無效，頁面一旦加載，控制臺(tái)的網(wǎng)絡(luò)那里可以直接看見所有的圖片請(qǐng)求，不會(huì)等到滾動(dòng)才請(qǐng)求）
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<img src="image.png" loading="eager" alt="…" width="200" height="200">
- 實(shí)現(xiàn)思路如下：
- img標(biāo)簽初始src屬性為空，或者統(tǒng)一指向一個(gè)url（加載依次后會(huì)被緩存，不占用資源）
- 設(shè)置data-url屬性，記錄此img標(biāo)簽?zāi)繕?biāo)圖片地址
- 獲取所有未加載圖片的img元素(擁有data-url屬性則表示未加載，已加載的移除此屬性），監(jiān)聽滾動(dòng)，實(shí)時(shí)計(jì)算元素是否處于屏幕中（當(dāng)滾動(dòng)條的距離+屏幕高度 > 元素到屏幕頂端的距離時(shí)，開始加載圖片）
- 加載圖片就是將src屬性的值替換成data-url屬性的值，同時(shí)移除data-url屬性
- 代碼實(shí)現(xiàn)：因?yàn)樾枰玫狡聊坏母叨龋詇tml標(biāo)簽的高度設(shè)置成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()
})
//創(chuàng)建一個(gè)節(jié)流構(gòu)造函數(shù),避免污染全局
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元素（有這個(gè)屬性說明未加載圖片）
var imgs = document.querySelectorAll('[data-url]')
for (var i = 0; i < imgs.length; i++) {
//判斷每張圖片是否進(jìn)入了屏幕
//如果offsetTop > 屏幕高度+垂直滾動(dòng)距離 則表示無需加載，反之則加載
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>
浙公網(wǎng)安備 33010602011771號(hào)