Come attendere fino a quando l’immagine viene caricata in jquery

Ho questo esempio, quando il mio form viene inviato, devo caricare un file di immagine e attendere che l’immagine è stata caricata da return true (in questo caso inviare il modulo)

ad esempio

$('#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);
})

Qui se ho return true la forma sarà presentato (l’immagine non si carica) e se false non (l’immagine verrà caricato, ma il modulo non sarà presentata). Come posso fare un codice che restituisce true dopo che l’immagine è caricata.

Un’occhiata a waitForImages plugin jquery.

OriginaleL’autore AMD | 2013-03-24

3 Replies
  1. 3

    C’è un concetto importante, si deve notare qui – Quando si aggiunge una funzione di Gestore di Eventi per essere eseguito quando un particolare evento viene attivato, il valore che la funzione di Gestore di Eventi returns in realtà non va da nessuna parte, ed è passata per niente. Listener di eventi creata per richiamare funzioni di gestione degli Eventi in un punto sconosciuto in futuro, ma tipico di esecuzione di script è completamente lineare e succede nell’ordine dei comandi nello script – quindi è meglio definire la funzionalità dell’applicazione in modo che si eseguono determinate azioni come questa, solo quando determinati eventi.

    Sembra che la tua domanda di cui sopra, la definizione di un gestore di eventi per l’ascolto quando il form viene inviato, inizialmente, così io ti prendo come un evento iniziale che ottiene tutto è iniziato. Ecco come vorrei gestire il processo di invio si descrivono:

    //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";
    });

    Esempio di questo lavoro su JSFiddle:

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

    Mi sento di raccomandare la lettura su jQuery .on() metodo per guadagnare una certa comprensione su la preferita attualmente i metodi di associazione di eventi – che dovrebbe chiarire le cose un po’.

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

    Buona fortuna!

    OriginaleL’autore Admiral Potato

  2. 2

    Si potrebbe utilizzare un onload o jquery load evento sull’immagine e inviare il modulo sul richiamata. Poi se vuoi aspettare ancora più tempo si potrebbe anche aggiungere un timeout nel callback.

    Qualcosa di simile:

    $('#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);
    })

    Nota: Nel mio esempio ho cambiato la submit evento per un click evento. Si può ancora usare il presentare se si vuole, si sarebbe probabilmente ancora lavoro, purché si restituiti false o usato preventDefault.

    src.invece il valore di Immagine.valore? Diversa da quella risposta migliore di Ammiraglio di Patate poiché Loop.

    OriginaleL’autore Coin_op

Lascia un commento