Question

我正在使用此事件来创建DataTable小部件

$(window).on('load', function () {
    TableData = $('#tableData').DataTable();
});

这样可以正常工作，并且还可以防止在表格单元格中的图像加载完成之前创建窗口小部件（否则，标题未与表格列正确对齐）。

但是我遇到这个问题，我更新了表格中的一行，有时，单元格中显示的图像不同，所以显然有加载延迟。

我想我只需要在图像完全加载时调用TableData.draw()，但$(window).on('load')在这种情况下不再起作用，因为窗口实际上并没有加载。

这是我在更新单行时所做的事情：

//temp has the data, tableRow[0] is the actually <tr> element.
$('#tableData').dataTable().fnUpdate(temp, tableRow[0], null, true, true);

在这种情况下，如何检测已完成加载的图像？我试过了

$(tableRow[0]).load('url', function (e) { //logic... })

但这是在url返回数据后执行，而不是在图像加载完成后执行。

有什么想法吗？

Answer 1

图片支持load事件，其工作方式与window的工作方式非常相似。

// Pure JS:
document.querySelector("#one").addEventListener("load", function(){ alert("Image One Loaded!"); });

// JQuery:
$("#two").on("load", function(){ alert("Image Two Loaded!"); });

img { width:100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="one" src="http://laoblogger.com/images/image-of-smiley-face-6.jpg">
<img id="two" src="http://images.clipartpanda.com/smiley-face-thumbs-up-thank-you-10_smiley_face.jpg">

要检查单元格中是否已加载所有图像，您可以执行以下操作：

// Get a all the images in the cell of the table and put them into an array
var imgs = Array.prototype.slice.call(document.querySelectorAll("table td > img"));

var count = 0; // Keeps track of how many images are loaded 

// Loop over each image...
imgs.forEach(function(img){
  // Set up load event handler
  img.addEventListener("load", function(){
    // Increase the count and check to see if all images in cell are loaded
    var msg = "";
    if(++count === imgs.length){ 
      msg= "All images in cell are loaded!";
    } else {
      msg = count + " images have loaded.";
    }
    console.log(msg);
  });
});

img { width: 100px; }

<table>
  <tr>
    <td>
      <img id="one" src="http://laoblogger.com/images/image-of-smiley-face-6.jpg">
      <img id="two" src="http://images.clipartpanda.com/smiley-face-thumbs-up-thank-you-10_smiley_face.jpg">
    </td>
  </tr>
</table>

子DOM元素的{window'加载事件的等价物

1 个答案: