Question

关于创建滚动控制背景视频的this教程。当我执行js文件（下面）时，我逐个得到404错误。但是，如果我在脚本中添加console.log（＆＃34; THIS IMG：＆＃34; + img），我可以看到代码在生成这些错误之前已经执行了（两次）。

一对一的错误明显减慢了我的页面加载速度，脚本应该只执行一次。我为background_vid.js做了一个文件搜索（下面），并且只有一次它的实例，所以我不明白为什么它不止一次执行。任何帮助非常感谢。

background_vid.js

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());

about.html.erb

        <!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

打印输出显示2x预期图像对象时出错

(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)

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

0 个答案: