实践

虚拟代理实现图片预加载

提前准备
  • 本地准备一张loading图片作为预加载使用
  • 找一个张网图作为要展示的目标图片
  • 在控制台把网速调慢一些

效果
  • 在目标图片没有加载出来之前会显示loading图片
  • 图片加载完成后切换到目标图片

主要代码
  1. //目标图片地址
  2. const targetImageSrc = 'https://w.wallhaven.cc/full/l3/wallhaven-l3zmwy.jpg';
  3. //本地loading
  4. const loadingSrc = './loading.gif';
  6. //要加载的图片
  7. function loadImage() {
  8.     //选择图片加载区域
  9.     const imgSection = document.querySelector('section');
  10.     const createImage = new Image();
  11.     imgSection.appendChild(createImage);
  12.     return {
  13.         get setImageSrc() {
  14.             return 'CANSET';
  15.         },
  16.         set setImageSrc(val) {
  17.             createImage.src = val;
  18.         },
  19.         // setImageSrc(src) {
  20.         //   createImage.src = val;
  21.         // },
  22.     };
  23. }
  25. //代理图片的工具
  26. //target 加载源需要有setImageSrc方法
  27. //目标图片src
  28. function proxyImager(target, src) {
  29.     //创建负责加载资源的图片
  30.     const handImage = new Image();
  31.     //监听负责加载资源的图片的load,设置在图片完成时把资源给target
  32.     handImage.onload = function () {
  33.         //TODO处理target边界
  34.         //1.可以直接通过属性设置,2.可通过函数调用传递src
  35.         target.setImageSrc = src;
  36.     };
  37.     //开启加载资源
  38.     handImage.src = src;
  39.     //开启本地loading
  40.     target.setImageSrc = loadingSrc;
  41. }
  42. //启动代理
  43. proxyImager(loadImage(), targetImageSrc);