Backpax初始化后设置data-img属性：页面加载图片不显示问题

原因分析 #

问题出在执行顺序和Backpax的工作机制上：

• Backpax初始化时会一次性扫描所有.js-parallax元素，读取data-img属性并加载对应背景图，之后不会主动监听属性的动态变化。
• 你当前是先初始化Backpax，再在$(document).ready里设置空属性div的data-img值——此时Backpax已经完成首次扫描，不会处理新设置的属性，所以初始页面只会显示背景色。
• 打开开发者工具或调整窗口会触发resize事件，Backpax会在该事件触发时重新检测元素属性，这才会加载新设置的图片。

解决办法 #

方法一：调整执行顺序（推荐） #

先完成data-img属性的动态设置，再初始化Backpax，确保Backpax启动时能读取到完整的属性值：

// 定义随机图片列表
const parallaxImgs = [
  '图片URL1',
  '图片URL2',
  '图片URL3'
];

$(document).ready(function() {
  // 先给空data-img的元素赋值
  $('.js-parallax[data-img=""]').each(function() {
    const randomIdx = Math.floor(Math.random() * parallaxImgs.length);
    $(this).attr('data-img', parallaxImgs[randomIdx]);
  });

  // 再初始化Backpax
  Backpax.init();
});

方法二：手动触发Backpax更新 #

如果必须保留初始化在前的顺序，可在设置完属性后手动调用Backpax的更新方法（强制重新扫描元素）：

// 先初始化Backpax
Backpax.init();

const parallaxImgs = [
  '图片URL1',
  '图片URL2',
  '图片URL3'
];

$(document).ready(function() {
  $('.js-parallax[data-img=""]').each(function() {
    const randomIdx = Math.floor(Math.random() * parallaxImgs.length);
    $(this).attr('data-img', parallaxImgs[randomIdx]);
  });

  // 手动触发Backpax重新加载
  Backpax.update();
});

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