Question

我需要渲染360张图片（base64数据）和一个视频（大约2GB）。

我测试了使用jssor滑块播放视频和图片，但是我收到了错误消息。这看起来像低GPU工作。因为我在javascript值中保存了base64数据，所以我认为这样做效果很好。然而，大约一个小时后图像不起作用，所以我不知道如何解决它。

我在更改图片时使用了动画：

for (var i = 0; i < list_size; i++) {
  col_transitions[i] = [{
      b: 0,
      d: 4000,
      sX: 2,
      sY: 2,
      e: {
        sX: 13,
        sY: 13
      }
    },
    {
      b: 4000,
      d: 3000,
      r: 360,
      e: {
        r: 4
      }
    }, //200,10
    {
      b: 7000,
      d: 3000,
      r: -360,
      e: {
        r: 4
      }
    }, //200,10
    {
      b: 10000,
      d: 4000,
      sX: -1.8,
      sY: -1.8,
      e: {
        sX: 13,
        sY: 13
      }
    },
    {
      b: 14000,
      d: 1600,
      x: 100,
      y: 70
    }, //100,70
    {
      b: 15600,
      d: 1600,
      x: -150,
      y: -20
    }, //-50,50
    {
      b: 17200,
      d: 1600,
      x: 50,
      y: -50,
      sX: -0.2,
      sY: -0.2
    }
  ];

  $("#slick_list").find("div[data-u=slides]").append("<div><img data-u=\"image\" data-t=\"" + i + "\"/></div>");
}
//I missed this code sorry
  $("#slick_list").find("div[data-u=slides]").append(
    "<div style=\"position:relative;\">"+
      "<video class=\"video1\" onended=\"video_end(1)\">"+
        "<source src=\"videos\/s1.mov\" type=\"video\/mp4\">"+
      "</video>"+
      "<img src=\"\"/>"+
    "</div>"
  );

视频在LocalPc上，图片来自远程服务器，该呼叫需要低于2秒，并且使用jsonp类型。呼叫点在图像可见之前，然后下一个图像开始加载。

图像数据将在阵列上。所以在加载不再加载的数据之后。如果图像不够（我的意思是低于360）那么img标签将在第一张图像重新加载。像一个循环（？）。

（实施例）

if(max_page !== null){
      page = img_cnt%(max_page+1);
    }else{
      page = img_cnt;
    }

上面的代码效果很好，直到大约200张图片。我不知道该怎么做。请帮帮我。

<小时/> 我在加载一些图像时使用此功能，之后显示

function load_image(){
    var img_path;
    if(max_page !== null){
      page = img_cnt%(max_page+1);
    }else{
      page = img_cnt;
    }
    if(eval("typeof img_dataArr._"+page)==="undefined"){
      $.ajax({
        async:false,
        cache :false,
        url : "{address}",
        jsonpCallback:"CB",
        crossDomain:true,
        method:"get",
        dataType :"jsonp",
        success:function(data){
          var image_data = decodeURIComponent(data['file']);
          eval("img_dataArr._"+page+"=\"data:image/png;base64,\"+image_data");
          if(data['max_cnt']) {
            max_page = page;
          }
        },
        error:function(e){
          max_page = page;
        },
        complete:function(data){
          if(!((img_cnt-2)<0)){
            $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt-2).attr('src',"");
          }else{
            $('#slick_list').find("div[data-u=slides]").last().find('img').eq(360+img_cnt-2).attr('src',"");
          }
          $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt).attr('src',eval("img_dataArr._"+page));
          $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt).css("display","inline");
          img_cnt = img_cnt+1;
        }
      });
    }else{
      if(!(((img_cnt%list_size)-2)<0)){
        $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt%list_size-2).attr('src',"");
      }else{
        $('#slick_list').find("div[data-u=slides]").last().find('img').eq(360+img_cnt%list_size-2).attr('src',"");
      }
      $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt%list_size).attr('src',eval("img_dataArr._"+page));
      $('#slick_list').find("div[data-u=slides]").last().find('img').eq(img_cnt%list_size).css("display","inline");
      img_cnt = img_cnt+1;
    }
  }

显然效果还不错，但是大约200多张图片无效但视频播放效果不错。

<小时/> 我在chrome上检查了性能。

能够看到那个位置。那个问题是记忆。因为能够在上看到

我该如何解决它？??

图像标签不是渲染图像

0 个答案: