JS中的图片的懒加载和预加载以及在VUE中如何实现

图片懒加载和图片预加载是两种常见的优化网页性能的技术，它们的目标是减少无用的网络请求和优化用户体验。

图片懒加载是指在网页加载时，先不加载真实的图片，只是加载一个占位图或者不加载图片。当用户滚动页面，图片即将进入可视区域时，再去加载真实的图片。这种方式可以减少页面加载时的网络请求，加快页面的首屏加载速度。

// 使用 IntersectionObserver 实现图片懒加载
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img').forEach(img => {
  observer.observe(img);
});

图片预加载是指在网页加载完成后，提前加载用户可能会看到的图片。当用户滚动页面，图片已经加载完成，可以立即显示，不会出现等待加载的情况。这种方式可以提高用户的体验，但是会增加页面加载时的网络请求。

// 使用 Image 对象实现图片预加载
const img = new Image();
img.src = 'http://example.com/image.jpg';
img.onload = function() {
  // 图片预加载完成
};

图片懒加载和预加载各有优点和缺点，需要根据实际的场景和需求来选择使用哪种方式。

在 Vue 中，我们可以使用第三方库或自定义指令来实现图片的懒加载和预加载。

图片懒加载：可以使用 vue-lazyload 这个第三方库来实现。

首先，安装 vue-lazyload：

npm install vue-lazyload --save

然后，在你的 Vue 项目中使用它：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// 或者添加一些选项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

在你的 Vue 组件中，使用 v-lazy 指令代替 src 属性：

<img v-lazy="imageSrc">

图片预加载：可以使用 JavaScript 的 Image 对象来实现。

new Vue({
  data: {
    imageSrc: 'http://example.com/image.jpg'
  },
  created() {
    const img = new Image();
    img.src = this.imageSrc;
    img.onload = () => {
      this.imageSrc = img.src;
    };
  }
});

在你的 Vue 组件中，使用 v-bind 指令绑定 src 属性：

<img v-bind:src="imageSrc">

在 Vue 项目中，如果你想要预加载一些资源，可以使用 html-webpack-plugin 和 preload-webpack-plugin 这两个 webpack 插件。

首先，你需要安装这两个插件：

npm install --save-dev html-webpack-plugin preload-webpack-plugin

然后，在你的 webpack 配置文件中使用它们：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new PreloadWebpackPlugin({
      rel: 'preload',
      as(entry) {
        if (/\.css$/.test(entry)) return 'style';
        if (/\.woff$/.test(entry)) return 'font';
        if (/\.png$/.test(entry)) return 'image';
        return 'script';
      },
      include: 'allAssets',
    }),
  ],
};

在上面的配置中，html-webpack-plugin 用于生成一个 HTML 文件，preload-webpack-plugin 用于在这个 HTML 文件中插入 preload 链接。

这样，当你的 Vue 应用加载时，浏览器会预加载这些 preload 链接指向的资源。

请注意，预加载可能会增加服务器的带宽使用，所以你应该只预加载关键的资源，而不是所有资源。