How do I lazy load images I haven't downloaded yet in JavaFX WebView?

Question

I'm making an email client that uses JavaFX WebView to display email HTML files. To make it responsive and quick, I want to have inline images appear in the email as they are downloaded locally. I looked up options for doing this and I came across the concept of lazy loading. So far I have found and tried to implement this script:

<script>
window.addEventListener('load', function(){
    var allimages= document.getElementsByTagName('img');
    for (var i=0; i<allimages.length; i++) {
        if (allimages[i].getAttribute('data-src')) {
            allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
        }
    }
}, false)
</script>

I'd go through the file, changing srcs to a fake name, adding/replacing data-src from each img element to be the proper path/name, and finally append the script to the end of the body element.

I'm pretty new to HTML past the basics, and JS isn't one for showing error logs, so I'm not sure what I'm doing wrong. My guess is that the script is working properly to a degree but works best when images are being streamed from an online src. My situation would have the files not even exist in a location until sometime after the HTML is loaded into the view.

If this isn't achievable, I know I could just code the WebView through Java to reload each time an image finishes downloading. I was just hoping to find something a little more elegant/potentially less jarring to users.

score 1 · Accepted Answer · answered Apr 04 '19 at 14:04

I found a solution and have posted it here.

It turns out that lazy loading isn't what I was looking for. Lazy loading just loads images later so the page can appear. My problem was handling load failure, which lazy loading doesn't account for. I'll flag this as a duplicate, but I'll leave the title of this question unedited so other people have a better chance of finding it.

How do I lazy load images I haven't downloaded yet in JavaFX WebView?

1 Answers1