Question

我尝试检查阵列上的图像文件是否在服务器上，然后显示图像。

数据库中的数组

文件浏览器中的图像

// Edit button
<button class="btnEdit" data-toggle="modal" data-target="#modalEdit" data-images="{{ $product->images }}">Edit</button>


// Edit Product
$('#products-table').on('click', '.btnEdit', function() {
  var imageArray = $(this).data('images');
  var baseUrl = window.location.origin;

  $(imageArray).each(function () {
    var imageUrl = baseUrl + '/img/product-img/' + this;

    // check to the server
    $.get(imageUrl).done( function() { 
      // show images
      $('#modalEdit #btnUploadImage').before(`
        <div class="image-box" data-modal-id="#modalEdit" data-original-background="` + imageUrl + `" style="background-image: url('` + imageUrl + `');">
          <div class="actions">
            <a class="btnSetThumbnail">
              <i class="mdi mdi-radiobox-blank"></i>
            </a>
            <a class="btnEditImage"data-toggle="modal" data-target="#modalEditImage">
              <i class="mdi mdi-pencil-outline"></i>
            </a>
            <a class="btnRemoveImage">
              <i class="mdi mdi-delete-outline"></i>
            </a>
          </div>
        </div>
      `);
    });
  });
});

我尝试了几次，有些出现的顺序正确，

有些出现的顺序错误。

如果我删除此代码$.get(imageUrl).done();，则图像会以正确的顺序显示，但是我必须检查文件。

我对产品视图功能也有相同的代码，它可以正常工作，所有图像均以正确的顺序显示，我该如何解决？

// Show Product
$('#products-table').on('click', '.btnShow', function() {
  var imageBox = $('#modalShow .image-box-static');
  var imageArray = $(this).data('images');
  var baseUrl = window.location.origin;

  $(imageArray).each(function (i) {
    var imageUrl = baseUrl + '/img/product-img/' + this;

    $.get(imageUrl).done( function() {
      $(imageBox[i]).css('background-image', 'url(' + this.url + ')');
      $(imageBox[i]).show();
    }).fail( function() {
      $(imageBox[i]).css('background-image', 'url(' + baseUrl + '/img/product-img/image-not-found.png)');
      $(imageBox[i]).show();
    });
  });
});

Answer 1

与产品视图的代码块不同的是，您正在更新css并在屏幕上以正确的位置/顺序显示一个html元素。在第一个代码块中，您还从done回调内部将html元素添加到页面中。这将导致在图像请求完成后添加html元素

防止这种情况的一种方法是在完成的回调之外添加hidden html元素，并在图像请求完成时使用done回调来显示它。然后，您还可以在图像损坏时使用fail函数删除html元素

阵列显示顺序错误

1 个答案: