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

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.Create 请求图像 table 并在必要时更新的 ajax 调用，并将 ajax 调用放入 setInterval

2.When 提交更改会有一个正确的 php 响应，其中图像 ID 存储在一个新变量中，假设 newId 和新 imgSrc 在变量 newImgSrc 中。然后：

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

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

加载页面时，您可以使用 jquery 存储所有图像。为此，您需要一个公共选择器或图像的父级。因此，您可以将所有图像包含在一个 div 中，id="images-parent"。在这种情况下，您可以将所有内容放入 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);

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

Images refreshed without reload the page

php

jquery

imagesource