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

我有一个登陆页面,其中有几个部分以图像为背景.每个部分占用屏幕的大小.在其中一个部分中,图像每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)');
}

最佳答案 为什么不在第一部分使用简单的纯css幻灯片?

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

在哪个移动设备上测试过?

我在iPad(第4代),iPad(第3代)和一些iPhone 5C和5S上遇到了这个问题.

什么是图像大小?他们被适当压缩了吗?

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

点赞