So I have a Python web service that creates maps with Folium/Leaflet.js. Each plotted point is a marker with a custom popup:
folium.Marker(
location=(row['lat'], row['lng']),
icon=folium.Icon(color=color_mapper[type]),
popup=folium.Popup(f'<p>{info_str} taken at {row["time"]} <br> \
Description: {row["description"]}</p> \
<img src={row["photoURL"]} width=300 height=500>'),
tooltip=info_str
)
At current the generated HTML map attempts to preload all image URLs provided in the tag. This can get disastrous with 3GB+ of images being loaded, delaying the loading of the map tiles and data points.
Question: Is there a way to stop the HTML from pre-caching the images within the popups, and only load the image when the popup is opened?
I thought of some js script I could inject into the page after generation and before uploading to our CDN to alter the behavior, but so far my efforts have been fruitless in building this.