刷新图像，而不重新加载页面。

Question

我有一个页面，在一个页面上加载200或更多的图像。

所有图像加载良好，但几秒钟后，我将发送一个请求

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);

我把新的图片加载到同一个页面。我在一个while循环中调用这个函数。

我想要的东西：

是否有一种方法只刷新已更改的图像？

变化是什么意思？

实际上，我有两个页面，一个用于编辑图像，另一个是查看器，我正在使用wPaint js编辑图像。下面你会发现两个页面的截图。

视图页

​

编辑器页

​

​

编辑器页面代码

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

查看页面代码

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

在加载页面时，您的php代码只加载一次。您的setInterval不会重新初始化您的php代码。

你可以做三件事之一。

1.创建一个ajax调用，该调用请求映像表并在必要时进行更新，并将ajax调用放入setInterval

2.当提交更改时，使用存储在新变量中的图像id具有适当的php响应，比如newId和变量newImgSrc中的新imgSrc。然后加上：

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

您可以直接更新受影响的图像。

1. 加载页面时，可以使用jquery存储所有图像。要做到这一点，您将需要一个通用的选择器或父图像。因此，您可以将所有图像包含在一个div中，并使用id=“”。在本例中，您可以将所有内容放入setInterval并进行如下更新： setInterval(function() { var d = new Date(); $("#images-parent").children("img").each(function() { var newImgSrc = $(this).attr("src"); $(this).attr("src",newImgSrc+"?"+d.getTime()); }); },8000);