jQuery slideDown下拉含图片的导航面板首次触发卡顿如何解决？

数据老陈

2026-10-6

根因

下拉面板默认设置了display: none，浏览器不会解析加载该容器内的图片资源，首次触发slideDown动画时才会同步触发图片加载，图片加载的请求和计算高度的操作会阻塞动画线程，导致首次执行卡顿。后续操作时图片已经被缓存，所以动画流畅；缓存过期或页面刷新后资源需要重新加载，卡顿就会复现。

解决方案（均无需重写原有业务代码，侵入性极低）

方案1：主动预加载导航面板内的图片
页面DOM加载完成后，主动触发下拉面板内所有图片的加载，将资源提前缓存到本地，首次触发动画时无需等待资源加载。直接在你独立的脚本中加入以下代码即可：
```
$(function() {
  $('.nav-item img').each(function() {
    const preloadImg = new Image();
    preloadImg.src = $(this).attr('src');
  });
});
```
方案2：修改容器隐藏规则，提前加载资源
将下拉面板的隐藏方式从display: none改为高度为0的形式，浏览器会提前加载容器内的所有资源，不会影响原有slideDown逻辑的执行，仅需要修改CSS：
```
#header-box .nav .nav-item {
  position: absolute; 
  top: 3.5rem; 
  right: 0; 
  left: 0;
  background: rgba(32,39,60,0.8);
  /* 替换原有display: none */
  height: 0;
  overflow: hidden;
}
```
方案3：固定面板内图片尺寸
如果面板内的图片尺寸是固定的，直接给图片预设宽高，浏览器在图片未加载完成时就可以提前计算出容器的总高度，不会因为图片加载完成后高度突变导致动画卡顿，仅需新增CSS：
```
.nav-item img {
  width: [你的图片实际宽度];
  height: [你的图片实际高度];
  object-fit: cover;
}
```