Please help me to understand the following.

I generate an JS object with some kind of data using PHP (WordPress), like:

$data = array(
 array(
  'title' => 'Title 1',
  'image  => 'https://example.com/image1.jpg'
 ),
 array(
  'title' => 'Title 2',
  'image  => 'https://example.com/image2.jpg'
 )
);
?>
<script type="text/javascript">
  var myVar = <?php echo wp_json_encode( $data ); ?>;
</script>

Then I render my section via JS using myVar object and pass all image URLs (which are not displaying initially) to a service worker for downloading them into the cache.

But in Chrome (Network tab) I see ALL images being downloaded while the page is loading.

Is that regular browser behaviour or did I miss something?
I don’t need them to be downloaded in the beginning, but only via SW or when my script reacts on a user event and changes image src tag.

Thanks in advance!

Read more here: Do browsers load images anyway if their URLs are "hidden" in <script>?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: