前端如何实现图片懒加载

前端性能优化里有图片的加载,有懒加载和预加载。那么什么是懒加载呢?

懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。 有的网站图片很多,而如果一上来就加载所有的图片,会导致网页加载很慢

图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片

预加载指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间,提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载。

 

图片懒加载的基本实现
图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源。根据这个原理,我们使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。

注意:data-xxx 中的xxx可以自定义,这里我们使用data-src来定义。

​懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时,获取图片的真实地址并赋值给图片即可。

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
    var scrollTop = document.body.scrollTop || document.document
    Element.scrollTop;
    var winHeight= window.innerHeight;
    for(var i=0;i < imgs.length;i++){
      if(imgs[i].offsetTop < scrollTop + winHeight ){
        imgs[i].src = imgs[i].getAttribute('data-src');
      }
    }
  }
  window.onscroll = lozyLoad();
</script>

Intersection Observer实现图片懒加载
Intersection Observer是HTML5新增的API,可以用来实现图片懒加载。MDN中对Intersection Observer的解释

​​IntersectionObserver​​接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时,其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以在同一个观察者对象中配置监听多个目标元素。

这里封装一个组件并且自定义一个v-lazy属性,然后替换到src上,实现懒加载。

import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from '@/assets/images/200.png'
import { App } from 'vue';

export default {
    install(app: App) {
        // 全局指令
        app.directive('lazy', {
            // mounted 是 v3 中自定义指令的生命周期,他会被自动调用
            // 它表示的含义和组件的mounted是一样的
            // el是 dom 元素, binding
            mounted(el, binding) {
                el.src = defaultImg
                console.log('lazy', el, binding.value);

                //实时鉴定el是否可见, 如果可见 给它的src设置binding.value
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        el.src = binding.value

                        stop()
                        el.onerror = function () {
                            el.src = defaultImg
                        }
                    }
                })

            }
        })
    }
}

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论