Trigger Mauerwerk nach jedem Bild laden in WordPress

Question

Ich habe Mauerwerk arbeiten in WordPress für eine Seite, die ich habe, dass hat etwa 20 Bilder, die geladen und dann Mauerwerk ausgelöst wird. Sieht perfekt aus, abgesehen von einer langsamen Verbindungsgeschwindigkeit, lädt es alle 20 Bilder hoch und rastet sie dann erst ein. Im Idealfall möchte ich nach jedem Bild ein Mauerwerk auslösen, so wie eine Mauer gebaut wird. Ich bin mir sicher, dass es gemacht werden kann, aber ich kann es nicht zur Arbeit bringen.

Der Code, den ich bisher verwendet haben, unten für das Mauerwerk laufen soll:

var container = document.querySelector('#ms-container'); 
    var msnry = new Masonry(container, { 
    itemSelector: '.ms-item', 
    columnWidth: '.ms-item', 
    }); 

dann, ich habe folgendes zu bekommen es versucht, nach jedem Bild zu laden, aber es funktioniert nicht,

imagesLoaded().progress(container, function() { 
    msnry = new Masonry(container, { 
     itemSelector: '.ms-item', 

    }); 
    }); 

Ich bin mir sicher, dass es möglich ist, kann jemand helfen?

Answer 1

Sie können Ihren Code ausführen, wenn die Seite vollständig geladen ist, einschließlich Bilder, indem Sie $(window).load() verwenden.

$(window).load(function() { 

    var container = document.querySelector('#ms-container'); 
    var msnry = new Masonry(container, { 
    itemSelector: '.ms-item', 
    columnWidth: '.ms-item', 
    }); 
}); 

EDIT

ein Ereignis ausgelöst, nachdem obwohl jedes Bild

$('img').on('load', function(){ 
    var container = document.querySelector('#ms-container'); 
    var msnry = new Masonry(container, { 
    itemSelector: '.ms-item', 
    columnWidth: '.ms-item', 
    }); 
});