mobone mobone - 1 year ago 60
jQuery Question

Load images once they are produced

I am new to javascript and jquery and can't seem to piece together what I need.

I would like my webpage to load, and then have ajax (or something similar), check every few seconds for a series of images. These images are scatter plots that are being rendered in the background and will eventually be produced in my /static/results/ directory.

I have found unveil.js which is a "lazy way to load images", but am not sure how to use it in conjunction with checking every few seconds if it exists.

Thanks for any help!

Answer Source

There are two concepts that you are trying mix, lazy loading and server requesting. Lazy loading is for images that you know you want to load, but you choose to load a bit later (when they come into view for example). Unveil.js is good enough for that. As for ajax requesting on intervals, you need to do the following:

  1. first, setup a server-side script that returns the image in a json object (preferable)

Example: in MVC.NET for example you can create an Action of JsonResult type, that returns a Json object

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);
  1. on load of page, request that script via ajax
$(function() {
        // on body load, ajax
        var getImage = function() {
            // wrap in inside a function to call on time out
                url: "script/getimage",
                success: function(result) {
                    // result is {imageSrc: "/static/results/img.png"}
                    // wait for few seconds and ajax again
                    setTimeout(getImage, 4000);

Read all about jQuery ajax parameters here: Note that an image with class "myimage" must be present in HTML code already.

  1. change image source when request comes back, wait for a whole, then ajax again (this is better than intervals, because with interval, you request the script on specific time laps, with timeouts, you wait for a request to come back before you make a new request)

Another simpler way to do it is that if you know the image name does not change, you can set timeout to simply reload image, without requesting from server. Like this (code untested, it contains simple javascript logic)

` $(function() { var myImage = $(".myimage"), current = 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) {

         var point=points[count++];

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


     // call first time