鼠标X轴控制图片序列播放：div宽度适配及加载闪烁问题求助

问题1：触发逻辑适配div宽度 #

• 直接删除重复定义的第二个onResize函数即可，同名函数后定义的会覆盖前者，原代码里第二个onResize把宽度赋值成了文档宽度，导致基准错误
• 额外补充坐标偏移计算：如果目标div不是贴合页面左侧放置，需要用鼠标位置减去div的左偏移量，得到相对div内部的X坐标，计算更准确

问题2：鼠标移动画面闪烁 #

• 新增图片预加载逻辑，页面初始化时就把所有序列图加载到浏览器缓存，切换背景时直接调用缓存资源，不会出现等待加载的空白间隙
• 补充数组下标边界判断，避免坐标超出div范围时数组下标越界报错

修正后完整代码 #

var blocWidth;
var imgblock = ['https://assets.codepen.io/265602/frame0.png', 
                'https://assets.codepen.io/265602/frame1.png',
                'https://assets.codepen.io/265602/frame2.png',
                'https://assets.codepen.io/265602/frame3.png',
                'https://assets.codepen.io/265602/frame4.png',
                'https://assets.codepen.io/265602/frame5.png',
                'https://assets.codepen.io/265602/frame6.png',
                'https://assets.codepen.io/265602/frame7.png',
                'https://assets.codepen.io/265602/frame8.png',
                'https://assets.codepen.io/265602/frame9.png',
                'https://assets.codepen.io/265602/frame10.png',
                'https://assets.codepen.io/265602/frame11.png',
                'https://assets.codepen.io/265602/frame12.png',
                'https://assets.codepen.io/265602/frame13.png',
                'https://assets.codepen.io/265602/frame14.png',
                'https://assets.codepen.io/265602/frame15.png',
                'https://assets.codepen.io/265602/frame16.png',
                'https://assets.codepen.io/265602/frame17.png',
                'https://assets.codepen.io/265602/frame18.png',
                'https://assets.codepen.io/265602/frame19.png',
                'https://assets.codepen.io/265602/frame20.png'];

// 预加载所有图片
function preloadImgs() {
  imgblock.forEach(imgUrl => {
    const img = new Image();
    img.src = imgUrl;
  })
}

function onMouseMove(e) {
    // 计算鼠标相对于bloc1的X坐标
    const blocOffsetLeft = $('.bloc1').offset().left;
    let x = e.pageX - blocOffsetLeft;
    // 边界处理，避免坐标超出div范围时报错
    x = Math.max(0, Math.min(x, blocWidth));
    // 数组下标最大为imgblock.length - 1，避免越界
    const imgIndex = Math.min(parseInt(x / blocWidth * imgblock.length), imgblock.length - 1);
    const theimg = imgblock[imgIndex];
    $('.bloc1').css("background-image", `url('${theimg}')`);
}

function onResize() {
    blocWidth = $('.bloc1').width();
}

// 初始化执行
preloadImgs();
onResize();
$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);

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