优化系列之图片处理 - junruchen/junruchen.github.io GitHub Wiki

import React, { useEffect } from 'react';

// 配置项
const placeHolder = 'placeholder.png' // 默认图片地址，也可直接设置图片背景色
const threshold = 200 // 距离视窗底部多少像素开始加载
const lazyClss = 'loaded' // 加载成功后样式，用来增加过滤动画等效果

function LazyloadImg() {
  // 需要展示的大量图片  
  const imgUrl = [
    'https://cdn.dribbble.com/users/772985/screenshots/7043973/pika_1_1x.jpg',
    ...
  ]

  useEffect(() => {
    const domScroll = () => {
      const clientHeight = document.documentElement.clientHeight || window.innerHeight
      document.querySelectorAll('.lazy').forEach(el => {
        
        // 设置默认图
        if (placeHolder && !el.src) {
          el.src = placeHolder
        }

        // 判断当图片在可视区内时，加载图片，并设置样式
        const imageTop = el.getBoundingClientRect().top
        const dataSrc = el.getAttribute('data-src')
        if (imageTop <= clientHeight + threshold && el.src !== dataSrc) {
          el.src = dataSrc
          if (lazyClss) {
            el.classList.add(lazyClss)
          }
        }
      });
    }

    domScroll()

    window.addEventListener('scroll', domScroll)

    return () => {
      window.removeEventListener('resize', domScroll)
    }
  }, [])

  return (
    <div>
      {imgUrl.map((item, idx) =>
        <img className="lazy" data-src={item} key={idx} alt={'图片' + idx} width="100%" />)
      }
    </div>
  );
}

export default LazyloadImg;

const xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.onreadystatechange = callback;
xmlhttprequest.open('GET', urls[0], true);
xmlhttprequest.send();
function callback() {
    if (xmlhttprequest.readyState === 4 && xmlhttprequest.status === 200) {
        console.log('success', xmlhttprequest.responseText)
    } else {
        console.log('error');
    }
}

//预加载
function preloadImg (urls, callback) {
    const images = [];
    const successImgs = [];
    const errorImgs = [];
    const done = () => {
        if (successImgs.length + errorImgs.length === images.length) {
            callback({
                success: successImgs.length,
                error: errorImgs.length,
                successImgs,
                errorImgs
            });
        }
    }

    if (typeof urls === 'string') {
        urls = [urls];
    }

    urls.forEach((url) => {
        const idx = images.length
        images[idx] = new Image();
        images[idx].src = url;
        images[idx].onload = function () {
            successImgs.push(this);
            done();
        };
        images[idx].onerror = function () {
            errorImgs.push(this);
            done();
        }
  })
}

preloadImg(images, (res)=> {
    // 其他处理
});