0

一次单一的请求和响应模型没有利用完整的网络/互联网带宽，从而导致性能低下。（基准是半速利用率）

如何使此代码使用 2 个或 3 个或更多异步请求而不是一个。（ajax） 还是我需要多线程？有可能在javascript中吗？

（这是为了从 ip 制作视频）每次图像根据请求更改时。是的，我需要与多个获取请求异步（不是我上面解释的单个），或者你推荐线程？

<html>
<head>  <script language="JavaScript">
    // Global vars
    img = 'http://pastebin.com/i/t.gif';
    timeout = 1000;
    next = 0;

    function onLoad( ) {
        setTimeout( 'reloadImage( )', timeout );
    }

    // Reloader
    function reloadImage( ) {
        next = ( new Date( ) ).getTime( ) + timeout;
        document.images.dv.src = img + "?" + next;
    }
    </script>
    </head> 

    <body>
    <img src="img" name="dv" onLoad="onLoad( )">
    </body>
</html>

和

<html>
<head>



</head>
<body>

<div id="container"></div>

<script language="JavaScript">
var canLoad = true;
var container = document.getElementById("container");
var image = document.createElement("img");
image.onload = function() {
    canLoad = true;
    console.log("Image reloaded.");
}
var imageUrl = "http://url/snapshot.jpg";
var fps = 2;

container.appendChild(image);

function loadImage() {
    if (canLoad) {
    canLoad = false;
    var str = new Date().getTime();
    image.setAttribute("src", imageUrl + "?" + str);
    console.log("Reloaded now.");
    } else {
    console.log("Can't reload now.");
    }
}

setInterval(loadImage, fps); // 30 fps

</script>
</body>
</html>
4

1 回答 1

1

没有实际测试过，我认为它最终很可能导致“堆栈溢出”（如果你直接实现它），但你仍然可以看看：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
    (function(){
        var img="/*url*/";
        var interval=50;
        var pointer=0;
        function showImg(image,idx)
        {
            if(idx<=pointer) return;
            document.body.replaceChild(image,document.getElementsByTagName("img")[0]);
            pointer=idx;
            preload();
        }
        function preload()
        {
            var cache=null,idx=0;;
            for(var i=0;i<5;i++)
            {
                idx=Date.now()+interval*(i+1);
                cache=new Image();
                cache.onload=(function(ele,idx){return function(){showImg(ele,idx);};})(cache,idx);
                cache.src=img+"?"+idx;
            }
        }
        window.onload=function(){
            document.getElementsByTagName("img")[0].onload=preload;
            document.getElementsByTagName("img")[0].src="/*initial url*/";
        };
    })();
    </script>
  </head>
  <body>
    <img  />
  </body>
</html>

它能做什么：

  1. 当初始图像加载时，preload()被调用；

  2. 当preload()被调用时，它会创建 5 个图像缓存，每个都将其onload事件附加到showImg();

  3. 当showImg()被调用时，它检查当前索引是否在 current 之后pointer，如果是，则用这个新的图像替换当前图像，然后调用preload();

  4. 回到 2。

如果你真的要实现这个，增加interval和减少i<5。此外，在加载下一个队列之前检查缓存/队列中有多少图像的缓存/排队机制会很好。

另外，请注意我没有使用getElementById来获取图像，因为不会有稳定的 ID。

于 2012-11-02T08:32:27.963 回答