javascript - 为什么这个 javascript 插入两个微调图像？

Question

// javascript for ajax pagination//

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
 }
})

为什么这个脚本要插入两个微调器图像？

这是html

 <div style="margin-top:25px;">
      <div class="pagination ajax">
           <span class="disabled prev_page">&laquo; Previous</span> 
           <span class="current">1</span> 
           <a href="/posts?page=2" rel="next">2</a> 
           <a href="/posts?page=3">3</a> 
           <a href="/posts?page=2" class="next_page" rel="next">Next &raquo;</a>
      </div>
      <br style="clear:both;"/>
 </div>

Answer 1

我通过 jslint 运行 javascript 并修复了所有错误，但 new Ajax。我移动了 createSpinner 函数，因为不建议在 block 内定义它。还移动了 img 的声明，添加了分号和换行符，使代码更具可读性。 (我没有测试代码，只是“美化”了一下)

document.observe(
  "dom:loaded",
  function() {
    var img;
    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' });
    }

    // the element in which we will observe all clicks and capture
    // ones originating from pagination links
    var container = $(document.body);

    if (container) {
      img = new Image( );
      img.src = '/images/spinner.gif';

      container.observe(
        'click',
        function(e) {
          var el = e.element();
          if (el.match('.pagination a')) {
            el.up('.pagination').insert(createSpinner());
            new Ajax.Request(el.href, { method: 'get' });
            e.stop();
          }
        }
      );
    }
  }
);