Question

我正在尝试使用大量带有spritespin捆绑包的图像（110）对页面进行360度旋转动画处理，这意味着它们均已加载，这意味着该页面需要一些时间才能显示。我尝试仅预加载一帧，但是当我围绕某些帧旋转图片时，无法正确加载（我换成空白），尤其是在最后一帧（因此最后一帧很可能仍未加载）。

这是我的spritespin配置：

<script>

var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', { 
    frame: [1, 110]
});

$(".spritespin").spritespin({
  // path to the source images.
  source: frames,
  //width   : 480,  // width in pixels of the window/frame
  //height  : 327,  // height in pixels of the window/frame
  responsive: true,
  animate: false,
  preloadCount:1,
  plugins: [
      '360',  // display plugin
      'drag', // interaction plugin
    ]
});
</script>

您还可以在此处查看网站的缓慢加载方式： https://dry-cove-88007.herokuapp.com

Answer 1

    var frames = SpriteSpin.sourceArray('/images/RcH_png_000{frame}.jpg', { 
            frame: [1, 110]
        });  
//add img 
       let imgLoading = $('<span class="loadersprite"><img src="/images/loading.gif"></span>');
       imgLoading.insertAfter('.spritespin');

然后使用oncomplete方法

  $(".spritespin").spritespin({
  source: frames,
  //width   : 480,  // width in pixels of the window/frame
  //height  : 327,  // height in pixels of the window/frame
  responsive: true,
  animate: false,
  preloadCount:1,
  plugins: [
      '360',  // display plugin
      'drag', // interaction plugin
    ],
     onComplete:function(){         
        imgLoading.hide();
        }
});

使用spritespin.js缓慢加载图像

1 个答案: