在图像像素加载时提交表单

Submit form on Image pixel load

本文关键字：提交 表单 加载 图像 像素      更新时间：2024-05-20

我有一个表单，需要在提交时加载图像像素。我注意到的问题是，表单是在加载图像之前提交的。我想在提交表单之前等待图像加载。我还需要保留这个模块，以便它可以用于同一页面上的多个图像和多个表单。

function loadImgPixel(pixelSrc){
    //the image pixel simply needs to load, not be displayed so there is no need to append this to the body element
    $("<img />").attr("src",pixelSrc).on("load",function(){
       return true;
    })
}
$("#myform").submit(function(e){
    e.preventDefault();
    form = $(this);
    var pix1 = loadPixel("https://cdn4.iconfinder.com/data/icons/sports-balls/1024/BasketBall.png");
    var pix2 = loadPixel("https://cdn4.iconfinder.com/data/icons/sports-balls/128/Tennis_ball.png");
    if(pix1 && pix2){
       form.unbind("submit")  //unbind submit so there isn't an endless loop due to 'preventDefault'
       .submit();             //submit form;
    }
})

当我在loadImgPixel(pixelSrc)函数上执行alert时。它抛出undefined。它似乎试图在.on("load")实际能够return true之前查看返回值。

问题#2：代码片段的.unbind部分用于防止可能像这里的代码一样引起的循环。然而，当我立即解除绑定并提交时，什么也没发生。

奖励点：假设我需要在表单提交中加载30个像素，那么在提交表单之前确保所有像素都已加载的最有效方法是什么。我认为有一种更好的检查方法，而不仅仅是(pix1 && pix2 && pix3 $$ pix4....){}

image-element的.load事件本质上是异步的。您无法确定元素的src何时加载。

要处理此类asynchronous活动，我们可以使用callback或Promise

Promise对象用于延迟和异步计算。Promise代表一项尚未完成的操作，但有望在未来完成。

为了确定所有的承诺都完成，无论是fulfilled还是rejected，我们使用Promise.all(iterable)方法。

resolve的结果作为来自所有promise的值的数组传递。为了测试resolved的所有值是否都通过了某个测试，我们可以使用Array#every。every()方法测试数组中的所有元素是否都通过所提供函数实现的测试。

function loadPixel(pixelSrc) {
  return new Promise(function(resolve, reject) {
    $("<img />").attr("src", pixelSrc).on("load", function() {
      resolve(true);
    }).on('error', function() {
      reject();
    });
  });
}
$("#myform").submit(function(e) {
  e.preventDefault();
  var form = $(this);
  var pix1 = loadPixel("https://cdn4.iconfinder.com/data/icons/sports-balls/1024/BasketBall.png");
  var pix2 = loadPixel("https://cdn4.iconfinder.com/data/icons/sports-balls/128/Tennis_ball.png");
  Promise.all([pix1, pix2]).then(function(values) {
    var res = values.every(Boolean);
    if (res) {
      form.unbind("submit").submit();
    }
  }, function(reason) {
    console.log(reason);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="" id='myform'>
  <input type="submit">
</form>

Fiddle演示

相关文章：