ExpressionEngine v6无插件实现图片预加载及移动端适配方案咨询

一、预加载屏幕外图片 #

方法1：CSS 静态预加载 #

适合不需要监听加载状态的场景，通过创建隐藏容器预加载图片：

.preload-container {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}
.preload-container::after {
  content: url('offscreen-img1.jpg') url('offscreen-img2.jpg') url('offscreen-img3.jpg');
}

页面加载时浏览器会自动请求这些背景图，不会干扰正常布局。

方法2：JavaScript 动态预加载 #

如果需要监听加载完成/失败状态，用Image对象实现：

const preloadList = ['offscreen-img1.jpg', 'offscreen-img2.jpg'];

preloadList.forEach(src => {
  const img = new Image();
  img.src = src;
  // 可选：监听加载事件
  img.onload = () => console.log(`${src} 预加载完成`);
  img.onerror = () => console.log(`${src} 预加载失败`);
});

把这段代码放在</body>标签前，或DOMContentLoaded事件回调中，确保页面基础结构加载后执行。

二、移动端适配小尺寸裁剪图 #

用HTML5 <picture>元素是最优方案，无需插件即可根据媒体查询切换图片：

<picture>
  <!-- 移动端加载裁剪后的小图 -->
  <source media="(max-width: 767px)" srcset="img-mobile-cropped.jpg">
  <!-- 桌面端加载原图 -->
  <img src="img-original.jpg" alt="图片描述文本">
</picture>

• 提前在服务端生成好适配移动端的裁剪图（比如按3:2、1:1等移动端常用比例裁剪）
• media属性可根据需求调整断点（如max-width: 480px适配小屏手机）

如果需要适配Retina屏，可结合srcset和sizes实现更精细的密度适配：

<picture>
  <source 
    media="(max-width: 767px)" 
    srcset="img-mobile-cropped-320w.jpg 320w,
            img-mobile-cropped-640w.jpg 640w"
    sizes="(max-width: 320px) 320px, 100vw"
  >
  <img src="img-original.jpg" alt="图片描述文本">
</picture>

浏览器会根据屏幕宽度和像素密度自动选择最优图片版本。

三、结合需求的注意事项 #

• 预加载路径要和<picture>中的图片路径保持一致，利用浏览器缓存避免重复请求
• 移动端裁剪图无需全部预加载，只预加载即将进入视口的图片，减少带宽浪费
• 大量图片预加载建议分批执行，避免一次性请求过多资源拖慢页面加载

内容的提问来源于stack exchange，提问作者alkaemia