Question

我是javascript和jquery的新手，似乎无法拼凑出我需要的东西。

我希望我的网页加载，然后有ajax（或类似的东西），每隔几秒检查一系列图像。这些图像是在背景中呈现的散点图，最终将在我的/ static / results /目录中生成。

我发现unveil.js是一种“加载图像的懒惰方式”，但我不知道如何使用它与每隔几秒检查一次是否存在。

感谢您的帮助！

Answer 1

您正在尝试混合，延迟加载和服务器请求两个概念。延迟加载适用于您想要加载的图像，但您选择稍后加载（例如，当它们进入视图时）。 Unveil.js足够好了。至于间隔请求的ajax，您需要执行以下操作：

首先，设置一个服务器端脚本，返回json对象中的图像（最好）

示例：例如，在MVC.NET中，您可以创建一个JsonResult类型的Action，它返回一个Json对象

[Route("script/getimage")]
public JsonResult GetImage(){
    // some code to find images in results folder, and return one
    var jsonObject = new
        {
            imageSrc = "/static/results/img.png"
        };

    return Json(jsonObject, "application/json; charset=utf-8", JsonRequestBehavior.AllowGet);
}

在页面加载时，通过ajax请求脚本

$(function() {
        // on body load, ajax
        var getImage = function() {
            // wrap in inside a function to call on time out
            $.ajax({
                url: "script/getimage",
                success: function(result) {
                    // result is {imageSrc: "/static/results/img.png"}
                    $(".myimage").src(result.imageSrc);
                    // wait for few seconds and ajax again
                    setTimeout(getImage, 4000);
                }
            });
        };
    });

在此处阅读有关jQuery ajax参数的所有内容：http://api.jquery.com/jQuery.ajax/ 请注意，HTML代码中必须存在类“myimage”的图像。

在请求返回时更改图像源，等待一段时间，然后再次ajax（这比间隔更好，因为有间隔，你在特定时间段请求脚本，超时，你等待请求返回在你提出新请求之前）

另一种更简单的方法是，如果您知道图像名称没有改变，您可以设置超时以简单地重新加载图像，而无需从服务器请求。像这样（代码未经测试，它包含简单的javascript逻辑）

$(function(){
var myImage = $(".myimage"), count = 0;
 // create counters
 var points = [];
 for(var x =1; x < 6; x++){
     for(var y = 1; y < 6; y++){
         points.push({x: x, y: y});
     }
 }

 myImage.on("load", function(e) {
     // get the next x and y in loop, then reset
     if (count >= points.length) count = 0;
     var point = points[count++];

     setTimeout(function() {
         getImage(point);
     }, 4000);
 });
 var getImage = function(point) {
     // better remove src first
     myImage.removeAttr("src");
     myImage.src = "/static/results/samples_" + point.x + "_" + point.y + ".png";

 };

 // call first time
 getImage(points[0]);
 });

Answer 2

我会使用socket.io服务器并在websocket消息接收上添加图像

生成后加载图像

2 个答案: