Javascript 图像标记不会渲染图像

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

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

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

for（变量i=0；i

视频在本地PC上，图片来自远程服务器，该调用需要低于2sec，即使用jsonp类型。调用点在图像可见之前，然后下一个图像开始加载

图像数据将在数组中。因此，在加载不再加载的数据后。如果图像不够（我的意思是低于360），则img标记将在第一个图像上重新加载。就像一个循环（？）

（示例）

上面的代码在大约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;
    }
  }

函数加载\图像（）{
var-img_路径；
如果（最大页数！==null）{
页码=img\U cnt%（最大页码+1）；
}否则{
page=img_cnt；
}
如果（评估（“img\U数据到达的类型+页面）=“未定义”）{
$.ajax({
async:false，
cache:false，
url:“{address}”，
jsonpCallback：“CB”，
跨域：是的，
方法：“获取”，
数据类型：“jsonp”，
成功：功能（数据）{
var image_data=decodeURIComponent（数据['file']）；
评估（“img\U数据阵列+页面+”=\“数据：图像/png；base64，\”+图像数据”）；
如果（数据['max_cnt']）{
最大页数=页数；
}
},
错误：函数（e）{
最大页数=页数；
},
完成：功能（数据）{
如果（！（（img_cnt-2）我不会访问基于我的计算能力生成的360 base64图片的网页，再加上加载2GB视频。你需要重新考虑你的策略。在本地主机上工作并使用url就像这个文件：//{c://{file_path}图像大小是1280*768。这看起来就像一个演示本地主机（直接从硬盘读取数据）与远程服务器（通过较慢的互联网连接传输数据）有很大不同。更不用说你正在向服务器发送300多个图像请求以及流式传输视频。我更惊讶的是它居然能工作。@Rorymcrossan你的观点是什么？对于浏览器来说，它绝对没有什么区别（至少在内存消耗方面）服务器所在的位置。它将从服务器请求数据，就像它是远程数据一样（跨源规则除外）.Localhost甚至应该消耗两倍于远程服务器的内存：数据应该作为正常的远程请求从HDD读取+从服务器发送+在浏览器上解码。加载时间也不会影响将使用的内存。
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;
    }
  }