javascript - 图片旋转背景js跳转到页面顶部

Question

我遇到了 javascript 问题，我不知道如何解决。首先，我在这方面完全是新手。我发现了一个在 div 元素中加载随机图像的代码，并对其进行了一些调整(原始代码按顺序加载图像 - 我插入了一种随机性算法(相当笨拙，但它以某种方式工作，并且很少一个接一个地重复相同的图像) .

现在代码工作得很好，但是当我滚动时，例如到页面的底部，脚本将新图像加载到 div 元素的那一刻浏览器跳转到页面顶部。 p>

如何阻止这种情况发生？请帮助我学习“ child 语言”(因为正如我所说，我在 js 方面是个新手)。

提前感谢大家抽出宝贵的时间!

<script src="js_vrt/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
  var images = ['img_vrt/pozadine/1p.jpg', 'img_vrt/pozadine/2p.jpg', 'img_vrt/pozadine/3p.jpg', 'img_vrt/pozadine/4p.jpg'];
  var image = $('#pozad');
  var i = Math.floor((Math.random() * images.length) + 0);
  var ist;
  //Initial Background image setup
  image.css('background-image', 'url(' + images[i++] + ')');
  //Change image at regular intervals
  setInterval(function() {

    image.fadeOut(1500, function() {
      image.css('background-image', 'url(' + images[i++] + ')');
      image.fadeIn(1500);
    });
    if (i == images.length)
      i = Math.floor((Math.random() * (images.length - 1)) + 0);
    else i = Math.floor((Math.random() * (images.length)) + 0);
  }, 5000);
});
</script>

Answer 1

我想出的解决方案:

问题不在js代码中。它是 HTML 结构。

如果有人遇到同样的问题，即加载图像时屏幕跳转到页面顶部，请执行以下操作:

具有变化背景的 div 元素必须包含在另一个包装 div 中(具有相同的高度)。

<div id="wrap_element">
    <div id="div_that_loads_the_images"></div>
</div>