function preloadImages(urls) { urls.forEach((url) => { const img = new Image(); img.src = url; }); } // 堆代码 duidaima.com preloadImages([ 'image1.jpg', 'image2.jpg', 'image3.jpg' ]);我们需要明白我们上述所说的图片预加载的意义,本质上是为了更好的用户体验。但是,如果我们直接使用上述代码,在页面初始化时就进行图片预加载,这个时候会一定程度上影响我们首屏的渲染速度以及用户的首屏体验。因此,图片预加载代码执行的时间点是我们需要思考的问题。
function preloadImages(urls) { urls.forEach((url) => { const img = new Image(); img.src = url; }); } if ('requestIdleCallback' in window) { requestIdleCallback(() => { preloadImages(['image1.jpg', 'image2.jpg', 'image3.jpg']); }); } else { // 如果浏览器不支持 requestIdleCallback,则使用 window.onload 事件作为后备方案 window.addEventListener( 'load', event => { preloadImages(['image1.jpg', 'image2.jpg', 'image3.jpg']); }, { once: true // 细节,调用一次后,自动移除事件处理函数 } ); }不知道兄弟们怕不怕麻烦,反正我怕麻烦。那如果我有很多张图片都需要预加载,一个一个导入图片路径不得麻烦死了。因此,我们希望有一种约定式的方式,来简化这个导入操作。譬如,我们希望项目工程目录的 assets/img 文件夹下以及子文件夹下的pre-开头的图片资源,都能被自动预加载。
function autoPreloadImages() { // 使用 require.context 动态获取指定文件夹及其子文件夹下的所有图片 // require.context(目录, 是否递归, 匹配文件的正则表达式) const files = require.context('../../assets/img', true, /^./.*pre-.*.(png|jpe?g|gif|webp)$/i); // 调用 files.keys() 获取匹配的文件路径数组,并通过 files(key) 获取每个文件的实际 URL const urls = files.keys().map(key => files(key)); // 检查浏览器是否支持 requestIdleCallback 方法 if ('requestIdleCallback' in window) { requestIdleCallback(() => { preloadImages(urls); }); } else { // 如果浏览器不支持 requestIdleCallback,则使用 window.onload 事件作为后备方案 window.addEventListener('load', event => { preloadImages(urls); }); } // 定义图片预加载函数 function preloadImages(urls) { urls.forEach(url => { const img = new Image(); img.src = url; }); } }
如果兄弟们还有更优雅的图片预加载方案,欢迎移步评论区。