Please help me to understand the following.

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

$data = array(
  'title' => 'Title 1',
  'image  => ''
  'title' => 'Title 2',
  'image  => ''
<script type="text/javascript">
  var myVar = <?php echo wp_json_encode( $data ); ?>;

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>?


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: