4

我有这个例子，当我的表单被提交时，我必须加载一个图像文件并等到图像加载到return true（在这种情况下提交表单）

例如

$('#myform').submit(function(){
  var image=document.createElement('image')  
  var src=document.createAttribute('src')
  image.value="http://example.com/image.jpg"
  image.setAttributeNode(src);
  document.body.appendChild(image);
})

在这里，如果我return true将提交表单（不会加载图像），如果false不会（将加载图像但不会提交表单）。如何制作一个在图像加载后返回 true 的代码。

4

3 回答 3

3

这里有一个重要的概念必须注意——当你添加一个事件处理函数以在触发特定事件时执行时，事件处理函数return的值实际上无处可去，并且什么都没有传递。创建事件侦听器是为了在未来某个未知时间点调用事件处理程序函数，但典型的脚本执行是完全线性的，并且按照脚本中的命令顺序发生 - 所以最好以某种方式定义应用程序的功能只有当某些事件发生时，您才会执行某些类似的操作。

看起来在您上面的问题中，您正在定义一个事件处理程序来侦听最初提交表单的时间，所以我将把它作为启动一切的初始事件。以下是我将如何处理您描述的提交过程：

//wrap the form element in jQuery and cache it so we don't work to re-select it
var $myform = $('#myform');

//specify that we are listening for -when- the form is submit
$myform.on('submit', function(event){
    //prevents the form from actually submitting when submit is first clicked
    event.preventDefault();

    //Simpler image construction
    var image = new Image();
    document.body.appendChild(image);

    //remember to listen for the image's load event before assigning a source
    $(image).on('load', function(){
        //this function is invoked in the future,
        //when the image load event has been fired

        //this bit actually submits the form via GET or POST
        $myform.submit();
    });

    //an image's `src` attribute can be set directly via the`src` property
    image.src = "http://placekitten.com/320/240";
});

在 JSFiddle 上工作的示例：

http://jsfiddle.net/Admiral/uweLe/

我建议阅读 jQuery 的.on()方法，以深入了解当前首选的事件绑定方法——这应该会让事情变得更清楚。

http://api.jquery.com/on/

祝你好运！

于 2013-03-25T00:45:06.777 回答
2

您可以在图像上使用onloadorjquery load事件并在回调中提交表单。然后，如果您还想等待更长时间，您还可以在回调中添加超时。

就像是：

$('#myform .submitButton').click(function(e){
  e.preventDefault();

  var image=document.createElement('image');

  $(image).load(function(){

    //Submits form immediately after image loaded.
    $('#myForm').submit();  

    // Submits form 1 second after image has loaded
    setTimeout(function(){ $('#myForm').submit(); }, 1000); 
  });

  var src=document.createAttribute('src');
  image.value="http://example.com/image.jpg";
  image.setAttributeNode(src);
  document.body.appendChild(image);
})

注意：在我的示例中，我已将事件更改submit为click事件。如果您愿意，您仍然可以使用提交，它可能仍然有效，只要您返回false或使用preventDefault.

于 2013-03-25T00:05:57.943 回答
0

我使用 imagesLoaded PACKAGED v3.1.8

你可以在 github 上找到它： https ://github.com/desandro/imagesloaded

他们的官方网站：http: //imagesloaded.desandro.com/

于 2014-10-20T04:46:57.190 回答