网页内容

CSS代码：

css
body {
margin: 0;
padding: 0;
overflow: hidden;
}

h1 {
margin-top: 200px;
text-align: center;
}

.bg-scroller {
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 100%;
overflow: hidden;
animation: scroll 30s linear infinite;
}

.bg-scroller img {
width: 50%;
height: 100%;
float: left;
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

JavaScript代码：

javascript
// 检测图片是否加载完成
function isImageLoaded(img) {
return img.complete && img.naturalHeight !== 0;
}

// 加载图片，并等待图片加载完成后执行回调函数
function loadImage(url, callback) {
const img = new Image();
img.src = url;

if (isImageLoaded(img)) {
callback();
} else {
img.onload = callback;
}
}

// 获取所有背景图片的URL
const bgImages = Array.from(document.querySelectorAll('.bg-scroller img')).map(img => img.src);

// 加载所有背景图片，并等待全部图片加载完成后执行初始化滚动效果
Promise.all(bgImages.map(url => new Promise(resolve => loadImage(url, resolve))))
.then(() => {
// 初始化滚动效果
document.querySelector('.bg-scroller').classList.add('initialized');
});

这段代码首先会检测背景图片是否加载完成，然后加载所有图片，并等待全部图片加载完成后执行初始化滚动效果。通过CSS的动画属性`animation`来实现滚动效果，设置`transform`的`translateX`属性来改变背景图的位置。最后，`Promise.all`用于等待所有图片加载完成后执行后续操作。

这样，当页面加载完成时，背景图会开始无缝滚动。记得将`background.jpg`替换为实际的背景图路径。

使用JavaScript实现一个无缝滚动的背景图效果

网页内容