javascript - 生成图像后加载图像

Question

我对 javascript 和 jquery 很陌生，似乎无法拼凑出我需要的东西。

我希望加载我的网页，然后使用ajax(或类似的东西)，每隔几秒检查一次一系列图像。这些图像是在后台渲染的散点图，最终将在我的/static/results/目录中生成。

我发现unveve.js是一种“加载图像的惰性方式”，但我不确定如何结合使用它并每隔几秒检查一次它是否存在。

感谢您的帮助!

Answer 1

您正在尝试混合两个概念:延迟加载和服务器请求。延迟加载适用于您知道要加载的图像，但您选择稍后加载(例如，当它们进入 View 时)。 Unveil.js 足以满足这一点。对于ajax间隔请求，需要执行以下操作:

1. 首先，设置一个服务器端脚本，以 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/请注意，具有“myimage”类的图像必须已存在于 HTML 代码中。

当请求返回时更改图像源，等待一段时间，然后再次使用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]);
 });