Question

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

如何使此代码使用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>

Answer 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>

它的作用：

加载初始图片时，会调用preload();
调用preload()时，会创建5个图片缓存，每个图片缓存都会将onload事件附加到showImg();
调用showImg()时，它会检查当前索引是否落后于当前pointer，如果是，请将当前图像替换为新图像，然后调用preload() };
返回2.

如果您真的要实现此功能，请增加interval并减少i<5。此外，一个缓存/排队机制可以在加载下一个队列之前检查缓存/队列中的图像数量是不错的。

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

在javascript中加载2个或更多异步请求以加载图像或执行任何其他操作

1 个答案: