Images refreshed without reload the page

Question

I have a page that loads 200 or more images on one page.
All images load fine but after a few seconds, I am sending a request using

setInterval(function() {
   var d = new Date();
   $("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?"+d.getTime()); },
8000);

and I load new images to this same page. I call this function in a while loop.

What I am looking for:

Is there a way to refresh just the images that have been changed?

What is meant by change?

Actually, I have two pages one is used for editing images and the other is a viewer I am using wPaint js for editing images. Below you'll find screenshots of both pages.

VIEW PAGE

Editor Page

Editor page code

//while loop start here

<div class="wPaint" id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:60px auto 20px auto;">
  <input type="hidden" class="editEnable" value="0">
  <a href="javascript:void(0);" class="saveImgBtn" id="saveImg<?php echo $row['id']; ?>">Save Image</a>
</div>

<script type="text/javascript">
  function saveImg(image) {
    var _this = this;
    $.ajax({
      type: 'POST',
      <?php if($_REQUEST['nz']==1){ ?>
      url: 'ajax/upload-nz.php?imgName=<?php echo $row['
      image_name ']; ?>&imgID=<?php echo $row['
      id ']; ?>',
      <?php }else{?>
      url: 'ajax/upload.php?imgName=<?php echo $row['image_name ']; ?>&imgID=<?php echo $row['id ']; ?>',
      <?php } ?>
      data: {
        image: image
      },
      success: function(resp) {
        if (resp == 1 || parseInt(resp) == 1) {
          _this._displayStatus('Image saved successfully');
          $(this).find(".editEnable").attr('value', '2');
          setTimeout(function() {
            $("#saveImg<?php echo $row['id']; ?>").css({
              'pointer-events': '',
              'opacity': '1'
            });
          }, 800);
        } else {
          alert('Some one delete this image. You can not edit or save this image now.');
        }
      }
    });
  }

  // both funciton use to load image on page load
  function loadImgBg() {
    this._showFileModal('bg', images);
  }

  function loadImgFg() {
    this._showFileModal('fg', images);
  }

  // init wPaint
  $('.wPaint').wPaint({
    path: '', // set absolute path for images and cursors
    autoScaleImage: true, // auto scale images to size of canvas (fg and bg)
    autoCenterImage: true, // auto center images (fg and bg, default is left/top corner)
    menuHandle: false, // setting to false will means menus cannot be dragged around
    menuOffsetLeft: 0,
    menuOffsetTop: -90,
    saveImg: saveImg,
    loadImgBg: loadImgBg,
    loadImgFg: loadImgFg,
    bg: '<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['
    src_path ']).$row['
    image_name ']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>', // set bg on init  
    imageStretch: false, // stretch smaller images to full canvans dimensions

    mode: 'text',
    fontSize: '40',
    fillStyle: '#FF0000',
    fontBold: true,
    strokeStyle: '#F00',
  });
</script>

//while loop ended here

View Page Code

//while loop start here

<div id="edit_<?php echo $row['id']; ?>" style="position:relative; width:<?php echo $width.'px'; ?>; height:<?php echo $height.'px'; ?>; margin:0px auto 20px auto;">
  <span id='ex<?php echo $row[' id ']; ?>' class="zoom"><img src='<?php echo SS_TLRM_IMG_EDITOR.str_replace("../","",$row['src_path']).$row['image_name']; ?>?cache=<?php echo str_replace(" ","",microtime()); ?>' id="img<?php echo $row['id']; ?>" />
  </span>
</div>
<script>
  setInterval(function() {
    // Date use to prevent browser cache
    var d = new Date();
    $("#img<?php echo $row['id']; ?>").attr("src", "<?php echo SS_TLRM_IMG_EDITOR.str_replace(".. / ","
      ",$row['src_path']).$row['image_name']; ?>?" + d.getTime());
  }, 15000);
</script>

//while loop ended here

Answer 1

Your php code loads once when the page is loaded. Your setInterval doesn't re-initialize your php code.

You can do one of three things.

1.Create an ajax call that requests the images table and updates when necessary and put the ajax call in the setInterval

2.When submitting a change have a proper php response with the image id stored in a new variable, let's say newId and the new imgSrc in a variable newImgSrc. Then with:

$("#img"+newId).attr("src", newImgSrc+"?"+d.getTime());

you can update directly the affected image.

3. When you load the page you can store all images using jquery. To do that you would need either a common selector or a parent for the images. SO you could enclose all images in a div with id="images-parent". In this case you can put everything in a setInterval and update like this:

   setInterval(function() { var d = new Date(); $("#images-parent").children("img").each(function() { var newImgSrc = $(this).attr("src"); $(this).attr("src",newImgSrc+"?"+d.getTime()); }); },8000);