Dynamic Content in Popuptemplate

[MikeV]

I'm displaying popups with images that also have some JavaScript events associated with them (onmouseover, omouseout events). In order to get the JavaScript events through the sanitizer in v4.23, I dynamically create a DOM element for my content like this:

popuptemplate.content = function(){

var div = document.createElement("div");
div.innerHTML = { my dynamic content, including the image URL, goes here };
return div;

}

While this method outputs the events, it also preloads all of my images when the page loads (over 1000 images). I only want to load the image when the popup is clicked and still be able to keep my events associated with the image. How can I accomplish this?

[ReneRubalcava]

What if you make the content function async? Seems odd that it loads all the images up front. I'd think the method only gets executed when the popup loads.

[MikeV]

Let me clarify a bit regarding the way I'm trying to do this. I have a function that creates the div with the dynamic content:

function getDynamicContent(content) {
    var div = document.createElement("div");
    div.innerHTML = content;
    return div;
}

For each of my Graphic items, I create a popupTemplate and call my function like this:

for (var i = 0; i < myCustomData.length; i++) {
 popuptemplate.content = getDynamicContent(myCustomData[i]);
 // code for initializing the point Graphic here.
 ...
}

So I call getDynamicContent for each of my array items, one of which is an image URL, and it renders all the images as it loads the map--not when the popup is clicked. I'm sure there's something I can do differently with the way my JavaScript is structured but I'm not quite sure what that is.

[ReneRubalcava · Accepted solution]

Is the "myCustomData" based on information from the feature? Based on the attributes? You could have that method be the content and create the elements when the popup opens. That would be the recommended way.

You can tweak that getDynamicContent method if you really need to

function getDynamicContent(content) {
  return () => {
    const div = document.createElement("div");
    div.innerHTML = content;
    return div;
  }
}

[MikeV]

Yes, using the arrow function allows the images to load when the popup is clicked instead of all at once when the page loads although I'm not clear why. Thanks for your help!