如何使用网络工作者加载图像？答案

【问题标题】：How to load images using web worker?如何使用网络工作者加载图像？
【发布时间】：2014-04-24 12:01:37
【问题描述】：

我正在尝试使用 webworker api 加载图像。我的 html 页面中有大图像，加载所有图像需要 5 分钟，因此我使用 webworker 加载图像。

这是技术..

我将html页面中所有img标签的src属性保持为空。
所有图像对于每个 img 都有唯一的 id，例如 id = events_all_1_01 意味着图像 src 将是“图片/关键字/events/all/1/01.jpg”。即最后一部分 events/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>

网络工作者代码。

 //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); 
    };

我收到以下错误：

未捕获的 SyntaxError：无法在“窗口”上执行“postMessage”：在调用“postMessage”时目标来源无效。

【问题讨论】：

您可能需要编辑您的帖子以使您的问题更清楚

标签： javascript html image web-worker

【解决方案1】：

错字：

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

e 未定义...您的意思可能是function(e) 或event.data.replace

更新

Window没有postMessage方法……需要使用worker方法worker.postMessage

【讨论】：

对不起，我有一些打字错误..但是它给出了 Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in call to 'postMessage'。
将postMessage(img_id); // here i am passing ...更改为worker.postMessage...
我们不能在 webworker 中使用 var img = new Image(); 所以它没有给我所需的性能......？
我想在后台加载图像，因为我不希望用户等到所有图像都加载完毕......我使用异步方法使用 xmlhttp=new XMLHttpRequest(); 加载图片也需要时间