javascript - jQuery 未在页面加载时执行

Question

我正在构建一个带有编辑功能(旋转、缩放和裁剪)的 ajax 上传，为此我使用了 matiasgagliano (https://github.com/matiasgagliano/guillotine) 的 guillotine。我的问题是，上传后用户通过 ajax 被重定向到编辑页面，但是当登陆该页面时，我总是必须在浏览器中刷新页面才能加载图像。

我试过通过 js 和 php 自动重新加载，但这没有用，添加按钮再次加载相同的 url 也没有用。只有从浏览器按钮刷新(在多个浏览器中测试)有效。我试过实现 jquery.turbolinks，但这使断头台功能停止工作。

我在 jQuery 之后的 head 部分加载了 guillotine.js，并且在 body 标签之前的底部有函数。

任何提示或帮助将不胜感激。谢谢

部分代码如下: HTML:

<div class='frame'>
    <img id="id_picture" src="identifications/<?php echo $id_url; ?>" alt="id" />
</div>

<div id='controls'>
    <a href='javascript:void(0)' id='rotate_left'  title='<?php echo $word_row[434]; ?>'><i class='fa fa-rotate-left'></i></a>
    <a href='javascript:void(0)' id='zoom_out'     title='<?php echo $word_row[436]; ?>'><i class='fa fa-search-minus'></i></a>
    <a href='javascript:void(0)' id='fit'          title='<?php echo $word_row[438]; ?>'><i class='fa fa-arrows-alt'></i></a>
    <a href='javascript:void(0)' id='zoom_in'      title='<?php echo $word_row[437]; ?>'><i class='fa fa-search-plus'></i></a>
    <a href='javascript:void(0)' id='rotate_right' title='<?php echo $word_row[435]; ?>'><i class='fa fa-rotate-right'></i></a>
</div>

Js:

<script type='text/javascript'>

  jQuery(function() {
    var picture = $('#id_picture');

    picture.guillotine({
      width: 240,
      height: 180
    });

    picture.on('load', function(){
      // Initialize plugin (with custom event)
      picture.guillotine({eventOnChange: 'guillotinechange'});

      // Display inital data
      var data = picture.guillotine('getData');
      for(var key in data) { $('#'+key).html(data[key]); }

      // Bind button actions
      $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
      $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
      $('#fit').click(function(){ picture.guillotine('fit'); });
      $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
      $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
      $('#process').click(function(){ 

          $.ajax({ 
            type: "POST", 
            url: "scripts/process_id.php?id=<?php echo $emp_id; ?>&user=<?php echo $user; ?>", 
            data: data,
            cache: false,
            success: function(html)
            {
                window.location = "<?php echo $finish_url; ?>";
            } 
          });

      });

      // Update data on change
      picture.on('guillotinechange', function(ev, data, action) {
        data.scale = parseFloat(data.scale.toFixed(4));
        for(var k in data) { $('#'+k).html(data[k]); }
      });


    });

  });
</script>

Answer 1

确保加载了 DOM 树和脚本。

var script = document.createElement('script');
script.src = "guillotine-master/js/jquery.guillotine.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function () { 

jQuery(function() { 
        var picture = $('#sample_picture');

        picture.guillotine({
          width: 240,
          height: 300
        });

        picture.on('load', function(){
          // Initialize plugin (with custom event)
          picture.guillotine({eventOnChange: 'guillotinechange'});

          // Display inital data
          var data = picture.guillotine('getData');
          for(var key in data) { $('#'+key).html(data[key]); }

          // Bind button actions
          $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
          $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
          $('#fit').click(function(){ picture.guillotine('fit'); });
          $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
          $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
          $('#process').click(function(){ 

              $.ajax({ 
                type: "POST", 
                url: "scripts/process_img.php?id=<?php echo $emp_id;?>&user=<?php echo $user; ?>", 
                data: data,
                cache: false,
                success: function(html)
                {
                    window.location = "<?php echo $finish_url; ?>";
                } 
              });

          });

          // Update data on change
          picture.on('guillotinechange', function(ev, data, action) {
            data.scale = parseFloat(data.scale.toFixed(4));
            for(var k in data) { $('#'+k).html(data[k]); }
          });


        });

    });
};