audio，Audio，探索声音的世界

温馨提示：这篇文章已超过467天没有更新，请注意相关的内容是否还可用！

摘要：根据提供的内容，无法确定具体的主题或信息，因此无法生成摘要。请提供更多具体信息或上下文，以便我能够为您生成一段合适的摘要。摘要通常需要包含主题、主要观点或信息点，以便简洁明了地概括内容。对于音频内容，可能需要描述主题、主要讲述的内容或关键信息点，以便提供一个简短的概述。

最近在做即时消息，消息类型除了文字还有音频、视频、图片展示，如果消息很多，在切换聊天框时，会有明显卡顿，后续做了懒加载，方案是只加载用户能看到的资源，看不到的先不加载；

（图片来源网络，侵删）

LazyAudio.tsx

import {useRef, useEffect} from 'react';
interface PropsType {
    url: string,
    className?: string,
}
export default function LazyAudio({url, className= ''}: PropsType) {
    const currentRef: any = useRef(null)
    useEffect(() => {
        if (!currentRef.current) {
            return;
        }
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
            // 表示进入了可视范围
            if (isIntersecting) {
                if (!currentRef.current.src) {
                    currentRef.current.src = url;
                    observer.unobserve(currentRef.current);
                }
            }
        });
        observer.observe(currentRef.current);
        
        return () => {
            if (currentRef.current) {
                observer.unobserve(currentRef.current);
            }
        }
    }, [])
    return (
        
            currentRef}
                controls 
                preload="metadata" 
                className={`${className} `}
            
        
    )
}

LazyImg.tsx

import {useEffect, useRef} from 'react';
interface PropsType {
    url: string,
    className?: string,
    onClick: () => void,
}
export default function LazyImg({url, className = '', onClick}: PropsType) {
    const currentRef: any = useRef(null)
    
    // 图片加载完成后
    const imageLoaded = () => {
        // 图片加载完成后重置了高度
        currentRef.current.style.height = 'auto';
    }
    useEffect(() => {
        if (!currentRef.current) {
            return;
        }
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
            // 表示进入了可视范围
            if (isIntersecting) {
                if (!currentRef.current.src) {
                    currentRef.current.src = url;
                    observer.unobserve(currentRef.current);
                }
            }
        });
        observer.observe(currentRef.current);
        
        return () => {
            if (currentRef.current) {
                observer.unobserve(currentRef.current);
            }
        }
    }, [])
    return 
        320}
            height={320}
            ref={currentRef}
            onClick={onClick}
            onLoad={imageLoaded}
            className={`${className} `}/
    
}

LazyVideo.tsx

import {useEffect, useRef} from 'react';
interface PropsType {
    url: string,
    className?: string,
    width?: number,
    height?: number,
}
export default function LazyVideo({url, className = '', width = 320, height = 240}: PropsType) {
    const currentRef: any = useRef(null)
    useEffect(() => {
        if (!currentRef.current) {
            return;
        }
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
            // 表示进入了可视范围
            if (isIntersecting) {
                if (!currentRef.current.src) {
                    currentRef.current.src = url;
                    observer.unobserve(currentRef.current);
                }
            }
        });
        observer.observe(currentRef.current);
        
        return () => {
            if (currentRef.current) {
                observer.unobserve(currentRef.current);
            }
        }
    }, [])
    return (
        
            currentRef}
                width={width}
                height={height}
                controls 
                preload="metadata"
                className={`${className} `}
                
            
        
    )
}