Javascript 脚本执行一次，然后在页面加载后（缓慢）执行第二次_Javascript_Ruby On Rails

Javascript 脚本执行一次，然后在页面加载后（缓慢）执行第二次

javascript ruby-on-rails

Javascript 脚本执行一次，然后在页面加载后（缓慢）执行第二次,javascript,ruby-on-rails,Javascript,Ruby On Rails,下面是创建滚动控制背景视频的教程。当我执行下面的js文件时，我一个接一个地得到下面的404错误。但是，如果我将console.logTHIS IMG:+IMG添加到脚本中，我可以看到代码在生成这些错误之前已经执行了两次一个接一个的错误明显降低了页面的加载速度，脚本应该只执行一次。我在下面搜索了background_vid.js的一个文件，并且只有一个它的实例，所以我不明白为什么它会执行多次。非常感谢您的帮助背景_vid.js 显示2倍预期图像对象的打印输出出错搜索脚本：我不是一个喜欢玩r

下面是创建滚动控制背景视频的教程。当我执行下面的js文件时，我一个接一个地得到下面的404错误。但是，如果我将console.logTHIS IMG:+IMG添加到脚本中，我可以看到代码在生成这些错误之前已经执行了两次

一个接一个的错误明显降低了页面的加载速度，脚本应该只执行一次。我在下面搜索了background_vid.js的一个文件，并且只有一个它的实例，所以我不明白为什么它会执行多次。非常感谢您的帮助

背景_vid.js

显示2倍预期图像对象的打印输出出错

搜索脚本：

我不是一个喜欢玩ruby的人，但是这个例子让我抓狂。阵列图像在哪里被推送到DOM？id=background的元素在哪里？我怀疑您忘记了JavaScript的异步本质，但我没有看到足够的代码来表达这一点。不，我看到你从哪里复制了所有的代码http://ekragency.com/demos/canvas-scroll/ ??

var totalImages = 183;
var images = new Array();
  for(var i = 1; i <= totalImages; i++) {
      var filename = 'look_up/img_' + i + '.png'; // Filename of each image
      var img = new Image;
      img.src = filename;
      // console.log("THIS IMG: " + img);
      images.push(img);
  }

var canv = document.getElementById('background');
$(canv).width($(window).width()).height($(window).height());

        <!DOCTYPE html>
        <html>

        <head>
            <meta charset="utf-8">

            <!--viewport goodness http://enva.to/A79s3G-->
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Title</title>

            <%= stylesheet_link_tag    'styles', media: 'all', 'data-turbolinks-track' => true %>
            <%= javascript_include_tag 'skrollr', 'data-turbolinks-track' => true %>
            <%= javascript_include_tag 'background_vid', 'data-turbolinks-track' => true %>
        </head>

    <body>
      <header class="band" data-0="background-position:0px 0px;" data-300="background-position:0px -120px;">
        <div class="container">
            <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
              <h1>Some text</h1>
            </div>
        </div>
      </header>

      <script type="text/javascript">
        var s = skrollr.init();

        skrollr.init({
          forceHeight: false
        });

      </script>
</body>

</html>

GET http://localhost:3000/look_up/img_1.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_3.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_2.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_4.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_5.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_6.png 404 (Not Found)
etc

(366)THIS IMG: [object HTMLImageElement]
about:28 GET http://localhost:3000/look_up/img_1.png 404 (Not Found)
about:28 GET http://localhost:3000/look_up/img_2.png 404 (Not Found)
etc

/Users/username/Desktop/projectname/blog/config/initializers/assets.rb:
   12  Rails.application.config.assets.precompile += %w( styles.css )
   13  Rails.application.config.assets.precompile += %w( skrollr.js )
   14: Rails.application.config.assets.precompile += %w( background_vid.js )
   15  # Rails.application.config.assets.precompile += %w( look_up )
   16  

~/Desktop/projectname/blog/log/development.log:
    <binary>

~/Desktop/projectname/blog/tmp/cache/assets/development/sprockets/v3.0/-qjvx7_GiChDURpYYTnp8pEaJawjBzP6fBQuXrISdGM.cache:
    <binary>

~/Desktop/projectname/blog/tmp/cache/assets/development/sprockets/v3.0/0dY5SeQHyY-ZRlY9Vn1Ft4lozpK1gpyxSA25YklX8dY.cache:
    <binary>
(these cached files then repeat)