Question

我有一个问题想和你分享。
所以这就是。想象一下，我有一个非常大的图像，当我打开我的页面时，它需要很大的负载。有可能，如果我想要有效果，如将图像剪切成许多较小的片段，并在图像加载时逐个合并它们（只需javascript，jquery，css和html代码）。

html：

<div>
    <div style="float:left; width: 200px; height: 200px;">
        <img id="imgHeavy" src="http://i.stack.imgur.com/kLQe4.png" width="200"/>
    </div>
    <div id="frameMerge" style="float:left; width: 200px; height:200px; background: #ddd;">
    </div>
</div>

所以现在我想设置元素的背景（#frameMerge）是打开页面时剪切的每一个图像（#imgHeavy）。
请看看2张照片！

我的img：
enter image description here

我的div元素：
enter image description here

任何想法都会受到赞赏！

Answer 1

你可以使用css3提供的多个背景图像的功能，但最终它不会更快，因为加载多个图片的数据甚至更大（每个文件的标题信息）比只有一个。唯一的区别是，您可以在加载其余部分之前看到图像的某些部分。但如果您的图像是jpg，则可以产生相同的效果。因此，您可以使用渐进式jpg，它将显示部分图像，而其余部分仍在加载。

Answer 2

您可以使用CSS3和jquery来完成。

以下是您的示例：

jsfiddle.net/elclanrs/4nsJE/

;(function( $, window ) {

  var _defaults = {
    x      : 2, // number of tiles in x axis
    y      : 2, // number of tiles in y axis
    random : true, // animate tiles in random order
    speed  : 2000 // time to clear all times
  };

  /**
  * range Get an array of numbers within a range
  * @param min {number} Lowest number in array
  * @param max {number} Highest number in array
  * @param rand {bool} Shuffle array
  * @return {array}
  */
  function range( min, max, rand ) {
    var arr = ( new Array( ++max - min ) )
      .join('.').split('.')
      .map(function( v,i ){ return min + i })
    return rand
      ? arr.map(function( v ) { return [ Math.random(), v ] })
         .sort().map(function( v ) { return v[ 1 ] })
      : arr
  }

  // Prevent css3 transitions on load
  $('body').addClass('css3-preload')
  $( window ).load(function(){ $('body').removeClass('css3-preload') })

  $.fn.sliced = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $(this);

      /*---------------------------------
       * Make the tiles:
       ---------------------------------*/

      var width = $container.width(),
          height = $container.height(),
          $img = $container.find('img'),
          n_tiles = o.x * o.y,
          tiles = [], $tiles;

      for ( var i = 0; i < n_tiles; i++ ) {
        tiles.push('<div class="tile"/>');
      }

      $tiles = $( tiles.join('') );

      // Hide original image and insert tiles in DOM
      $img.hide().after( $tiles );

      // Set background
      $tiles.css({
        width: width / o.x,
        height: height / o.y,
        backgroundImage: 'url('+ $img.attr('src') +')'
      });

      // Adjust position
      $tiles.each(function() {
        var pos = $(this).position();
        $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
      });

      /*---------------------------------
       * Animate the tiles:
       ---------------------------------*/

      var tilesArr = range( 0, n_tiles, o.random ),
          tileSpeed = o.speed / n_tiles; // time to clear a single tile

      // Public method
      $container.on( 'animate', function() {

        tilesArr.forEach(function( tile, i ) {
          setTimeout(function(){
            $tiles.eq( tile ).toggleClass( 'tile-animated' );
          }, i * tileSpeed );
        });

      });

    });

  };

}( jQuery, window ));

$('.sliced').sliced({ x: 6, y: 4, speed: 1000 });

$('button').click(function() {
    $('.sliced').trigger('animate');
});

Answer 3

当然，您可以在每个段上放置一个onload事件（必须在<img>上），使其淡入。但是，实际上将图像分割成段不能在客户端进行。您需要预先手动拆分图像或依赖服务器端脚本（例如php）来执行此操作。

另外，请注意，执行此操作会产生相当多的开销，具体取决于您使用的段数，因为每个段都需要向服务器发出新请求，包括为每个映像下载文件头。

重图像（非常大的图像）加载效果

3 个答案: