웹 작업자를 사용하여 이미지를로드하는 방법은 무엇입니까?

webworker api를 사용하여 이미지를로드하려고합니다. 내 html 페이지에 큰 이미지가 있으므로 모든 이미지를로드하는 데 5 분이 걸립니다. 따라서 이미지를로드하는 데 webworker를 사용하고 있습니다. 여기웹 작업자를 사용하여 이미지를로드하는 방법은 무엇입니까?

기술입니다 ..

나는 HTML 페이지에서 비어있는 모든 IMG 태그의 src 속성을 유지하고있다.
모든 이미지는 각 IMG 예 : ID = events_all_1_01 의미 이미지 SRC가 될 것 "사진/키워드/이벤트/모든/1/01.jpg"에 대한 고유 ID가 있습니다. 즉 마지막 부분 이벤트/all/1/01.jpg는 id입니다.

Main.html 파일

<body> 
    <script src="js/modernizr.custom.js"></script> 
    <script language="javascript"> 
     window.onload = function(){ 
     if (Modernizr.webworkers) {    
      var worker = new Worker('js/webworker/test_ww_23_04.js'); 
      worker.onmessage = function(event) { 
       var url = event.data.replace(/_/g, "/"); 
       var image_src = "pictures/keywords/"+url+".jpg"; 
       var img = new Image(); 
       img.src = image_src;  
       img.onload = function(){ 
        // do stuff when your image is loaded 
        document.getElementById(event.data).src = image_src; 
       }       
      }; 

      worker.onerror = function(e) { 
       alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message); 
      }; 

       var img_container = document.getElementById("wrapper"); 
       var image_array = img_container.getElementsByTagName('img'); 
       for(var i=0;i<image_array.length;i++){ 
        var img_id = image_array[i].id; 
        console.log(img_id); // http://jsfiddle.net/5vyseob7/ 
        postMessage(img_id); // http://jsfiddle.net/k04t6760/ here i am passing id one by one to webworker.. 
       } 
      } // end of if condition            
     } // end of window.onload() 

    </script> 
    <div id="wrapper" style="height: 500px;width: 200px;overflow-y: auto;border: 1px solid gray;"> 
     <div id="pictures1"> 
      <div class="effect-1"> 
       <div><img src="" id="events_all_1_01" width="150" height="100"></div> 
       <div><img src="" id="events_all_1_02" width="150" height="100"></div> 
       <div><img src="" id="events_all_1_03" width="150" height="100"></div> 
       <div><img src="" id="events_all_1_04" width="150" height="100"></div> 
      </div> 
      <hr/> 
      <div class="effect-2"> 
       <div><img src="" id="events_all_2_01" width="150" height="100"></div> 
       <div><img src="" id="events_all_2_02" width="150" height="100"></div> 
       <div><img src="" id="events_all_2_03" width="150" height="100"></div> 
       <div><img src="" id="events_all_2_04" width="150" height="100"></div> 
      </div> 
      <hr/> 
      <div class="effect-3"> 
       <div><img src="" id="events_all_3_01" width="150" height="100"></div> 
       <div><img src="" id="events_all_3_02" width="150" height="100"></div> 
       <div><img src="" id="events_all_3_03" width="150" height="100"></div> 
       <div><img src="" id="events_all_3_04" width="150" height="100"></div> 
      </div> 
      <hr/> 
      <div class="effect-4"> 
       <div><img src="" id="events_all_4_01" width="150" height="100"></div> 
       <div><img src="" id="events_all_4_02" width="150" height="100"></div> 
       <div><img src="" id="events_all_4_03" width="150" height="100"></div> 
       <div><img src="" id="events_all_4_04" width="150" height="100"></div> 
      </div> 
     </div> 
    </div> 
</body>

webworker 코드입니다.

//var src = 'pictures/keywords/events/all/1/01.jpg'; 
//var id = src.substring(src.substring(0,18).length).split('.')[0].replace(/\//g, "_"); // Creating id here......events_all_1_01 
//var fst = id.substring(0, id.lastIndexOf("_")+1); // get first part.... events_all_1 
//var lst = parseInt(id.substr(id.lastIndexOf("_")+1)); // get last part i.e imagename ..01,02,03 etc....... and convert it to int 

    function LoadImages(currID) { 
      setTimeout(function() { 
       postMessage(currID); 
      }, 100); 
    } 
    self.onmessage = function(event) { 
     var currID = event.data; 
     LoadImages(currID); 
    };

나는 오류 다음 점점 오전 :

catch되지 않은 구문 에러 : 잘못된 대상 원점 '를 PostMessage'에 대한 호출에서 '': '창'에 'PostMessage를'을 실행하지 못했습니다.

출처

2014-04-24 Developer Desk

귀하의 질문을 명확하게하기 위해 게시물을 편집해야 할 수도 있습니다 – user3334690

오타 오류 :

... 
worker.onmessage = function(event) { 
    var url = e.data.replace(/_/g, "/");

전자는 아마도 PostMessage를 방법이없는 function(e) 또는

UPDATE

창 event.data.replace 의미 ... 정의되어 있지 않습니다. .. 작업자 메서드를 사용해야합니다. worker.postMessage

출처

2014-04-24 12:46:10 rafaelcastrocouto

죄송합니다. 입력 오류가 있습니다. ** Uncaught SyntaxError : '창'에 'postMessage'를 실행하지 못했습니다. '통화가 잘못되었습니다' 'postMessage'. ** –

변경'postMessage (img_id); // 여기 내가 지나가 다 ...''worker.postMessage ... ' – rafaelcastrocouto

오, 고마워, 바보 같은 실수를 했어 ......... –

웹 작업자를 사용하여 이미지를로드하는 방법은 무엇입니까?

답변

관련 문제