Fill Leaflet popup on click when acctually needed

Question

I have a map with a lot of markers and a complex popup content, generated by a function called popupcontent(), which takes a lot of time to compute when it is done for all markers on the map with the oneachfeature function.

Is there a way to trigger a function in a popup only when it is actually opened instead of generating all the popups in the beginning? This would speed up loading time a lot.

This is my code so far (I am using the markerclusterer extension):

    var geojson1 = L.geoJson(bigJson,{

    onEachFeature: function (feature, layer) {
        layer.bindPopup(popupcontent(feature,layer));
    }
    })
                .addLayer(tiles);
        var markers = L.markerClusterGroup({
            spiderfyOnMaxZoom: true,
            showCoverageOnHover: true,
            zoomToBoundsOnClick: true,
            disableClusteringAtZoom: 10,
            removeOutsideVisibleBounds:true
        });

        var geoJsonLayer = L.geoJson(bigJson, {
        });
        
        markers.addLayer(geojson1);
        map.addLayer(markers);
        map.fitBounds(markers.getBounds());

Demo: http://stefang.cepheus.uberspace.de/farmshops/

Answer 1

I think what you're looking for is something like so (if your layer is an interactive layer):

onEachFeature: function (feature, layer) {
  layer.once("click", ()=>{
    layer.bindPopup(popupcontent(feature,layer)).openPopup();
  });
}

Use "once" instead of "on" so it only gets binded once when the layer is clicked.