Question

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

e.g。

$('#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的代码。

Answer 1

这里必须注意一个重要的概念 - 当你添加一个事件处理程序函数以便在特定事件被触发时执行时，事件处理程序函数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/

祝你好运！

Answer 2

您可以在图片上使用onload或jquery 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，它仍然可以使用。

Answer 3

我使用imagesLoaded PACKAGED v3.1.8

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

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

如何等待图像加载到jquery中

3 个答案: