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和new imgSrc位于变量newImgSrc中。然后用：

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

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

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

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

1 个答案: