JS를 사용하여 URL에서 이미지를로드하고 있지만로드하는 데 너무 많은 시간이 필요합니까?

Question

json에서로드하는 이미지가있는 갤러리 모델 html 페이지를 만들었습니다. 그러나 이미지를로드하는 데 너무 많은 시간이 걸리므로이 비동기를 만들 수있는 방법이 있습니다.

스피로드 거의 200 -이 JSON 형식

[ 
{ 
"url":"https://newevolutiondesigns.com/images/freebies/cool-wallpaper-5.jpg", 
"name":"movie name", 
"location":"location" 
}, 
{ 
"url":"https://images2.alphacoders.com/419/41912.jpg", 
"name":"movie name2", 
"location":"location2" 
}, 
{ 
"url":"https://wallpaperscraft.com/image/anonymous_guy_fawkes_mask_mask_machete_99814_602x339.jpg", 
"name":"movie name3", 
"location":"location3" 
}, 
{ 
"url":"http://www.wallpaperhi.com/thumbnails/detail/20121108/men%20keanu%20reeves%20actors%201920x1080%20wallpaper_www.wallpaperhi.com_47.jpg", 
"name":"movie name4", 
"location":"location4" 
} 
....... 
] 

400 영상이 내 HTML 코드입니다

<div id="listView" name="listView"> 
//Content loading here from js 
</div> 

이 내가 JSON 및로드 이미지

을 구문 분석하는 데 사용 내 JS 코드

window.onload=function(){ 

    var output = document.getElementById('listView'); 
    var i=0; 
    var val=""; 

    $.ajax({ 
    url: "https://api.myjson.com/bins/2m7gn", 
    //force to handle it as text 
    dataType: "text", 
    success: function(data) { 

     //data downloaded so we call parseJSON function 
     //and pass downloaded data 
     var json = $.parseJSON(data); 
     //now json variable contains data in json format 
     //let's display a few items 
     for (var i=0;i<json.length;++i) 
     { 
      if(!document.getElementById('timedrpact'+i)) 
     { 
      var ele = document.createElement("div"); 
      ele.setAttribute("id","timedrpact"+i); 
      ele.setAttribute("class","col-sm-6 col-md-4 box portfolio-item square"); 
//   ele.setAttribute("style","background-color:"+arr[i]); 
      output.appendChild(ele); 


      var ele = document.createElement("a"); 
      ele.setAttribute("id","a"+i); 
      ele.setAttribute("class","a_square"); 
      ele.setAttribute("href","www.google.com"); 
      ele.setAttribute("target","_self"); 
      ele.setAttribute("style","text-decorartion:none"); 
      document.getElementById("timedrpact"+i).appendChild(ele); 

      var ele = document.createElement("img"); 
      ele.setAttribute("id","img"+i); 
      ele.setAttribute("class","img_model"); 
      ele.setAttribute("style","width:100%;object-fit: cover;"); 
      ele.setAttribute("src","https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png"); 
      ele.setAttribute("src",json[i].url); 
      document.getElementById("a"+i).appendChild(ele); 

      var ele = document.createElement("div"); 
      ele.setAttribute("id","red"+i); 
      ele.setAttribute("class","redO"); 
      document.getElementById("img"+i).appendChild(ele); 

      var ele = document.createElement("div"); 
      ele.setAttribute("id","like"); 
      ele.setAttribute("class","like"+i); 
      ele.setAttribute("style","background-color:red"); 
      document.getElementById("red"+i).appendChild(ele); 


     } 


     } 
    } 
}); 

}; 

URL에서 더 좋은 방법로드 이미지가 더 빠릅니까?

Answer 1

AJAX 요청을 실행하고 PHP에서 요청한 이미지를 25 개 또는 50 개로 제한하기 위해 문서 스크롤 (거의 아래쪽에 위치)에 바인딩합니다. 또한 저는 아약스 qeueuing을 사용합니다.

예쁘게하려면 imgvar 변수를 미리로드하고 이미지 요소의 가운데에 애니메이션을로드하십시오. imgvar로드시 이미지 요소 src를 imgvar.src로 업데이트하십시오.