Question

我有一个着陆页，其中有几个部分以图像为背景。每个部分占用屏幕的大小。在其中一个部分中，图像每5秒钟更换一次。

我的网站在桌面上加载并正常工作（据我所知）。但是在移动设备上，当我向上和向下滚动页面时，它会继续重新加载。

例如：我正在查看已加载的第2部分。我向下滚动到第3部分，它仍在加载。一旦它被加载我滚动到第2部分，第2部分开始重新加载，即使它在那里是相同的图像。无论我上下滚动多少都会发生这种情况。

我正在使用bootstrap 3，jQuery（不是jQuery mobile）和HTML5

*请注意，第1部分的图像会一直在进行交换。我在替换旧图像之前在后台加载这些图像：

var imgPreload = new Image();
$(imgPreload).attr('src', '/new-image.jpg').load(function() {
    $(this).remove(); // prevent memory leaks
    $('#section1').css('background-image', 'url(/new-image.jpg)');
}

Answer 1

为什么不在第一部分使用简单的纯CSS幻灯片？

pure Css3 slideshow对我来说是全屏背景图片的一个简单但很好的解决方案。

哪个移动设备已经过测试？

我在iPad（第4代），iPad（第3代）以及部分iPhone 5C和5S上遇到过这个问题。

图片尺寸是多少？它们被适当压缩了吗？

我通过缩小图像大小来部分解决

网站图片不断在手机上重新加载

1 个答案: