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="image.png" loading="lazy" alt="…" width="200" height="200">
<img src="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>

posted @ 2019-09-21 22:53 ---空白--- 阅读(1039) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

---空白---

HTML img标签

1.基本用法

2.设置图片的宽高

3.获取图片宽高

4.多图片边距的问题

5.图片加载失败时img元素的大小

6.图片懒加载

公告