Page opening fine in Chrome but getting stuck on Safari

[aeroloop (Michel Buchi)]

After upload, the page works fine on Google Chrome, safari on IPhone, it has as an image viewer and page scrolling parallax in JS.
In Safari laptop, I get the following error message “ApplicationCache is deprecated. Please use ServiceWorkers instead.” and the page load only if I clear cache and the image viewer do not load the images.
Page link: http://aeroloop.com/aeroflash/canvas.html
Any help or suggestion is welcome.
Thanks.

[jonathan (Jonathan Deutsch)]

I get a 404 with your link currently.

The problem is probably that you have “Create offline application cache” checked in the Document Inspector and don’t need to use it.

[aeroloop (Michel Buchi)]

Thanks for your help, I found out that there was some trouble with the JS, re did it and now its working fine.

[aeroloop (Michel Buchi)]

Thanks again for your help, now I am running into a different situation, I upload the file on the server, and as I have a lot of pictures, I put them on a separate folder and call them in html contents that way: that is working absolutely fine with the other pages I have with similar settings, pages:web.html and paint.html are running the way it should be, but the page publish.html will load on the server all images that are in the separate folder and not on the Hype file, as you can see all files uploaded on the web server show only the images from the Hype but the web inspector is loading all images, and as it is over 3MB it will take more than 3 minutes to open the page. Been trying to find out why without success, thank you very big.
You can view the project at https://aeroloop.com/aeroloop2020/

[MarkHunte]

Not sure if I am seeing what you are seeing,
You may want to post the project so we can see how you are linking the images but from what I can see and you screenshot confirms. You are loading 183 + MB of thumbnails.

So even when you click on one of the selection areas on the Publishing page soon as the page comes up to see the thumbs The thumbs are still loading…

I would not preload all the thumbs but try and load them as needed. This is called Lazy loading

Note, below is the first link I came across re lazy loading. It is more of what it is than how to do it within Hype.

Five Ways to Lazy Load Images for Better Website Performance — SitePoint

In this link is what @Daniel posted regard lazy loading plugin…

Offline Documentation

The docs were built as a ruby app that reads a set of Markdown files. I started with the goal of allowing us to write documentation in Markdown and got a bit carried away. These docs make use of the following projects and output to a single HTML file: Lunr for Searching the full text of the docs: http://lunrjs.com Tocify to build the index on the left side of the page: http://gregfranko.com/jquery.tocify.js/ Energize to make mobile link clicks faster: https://github.com/davidcalhoun/energize…

-------

Update,

Think I found why you are loading the server images.
You have entries like this in your functions.

"url(images/Cards/" +str + ".jpg)";

it should be

“url(${resourcesFolderName}/” +str + “.jpg)”;

[aeroloop (Michel Buchi)]

Images are loading that way on the page: img

<src=“images/TimeOut/88/book_88.1.cover.jpg” width=“381” height=“776”> those are not thumbs, thumbnails are in the resource folder.
If I put “url(${resourcesFolderName}/” +str + “.jpg)”; I need to have them in the resource folder, is that right? but all images to be loaded separately are on an external folder. what I do not get is that this method is working fine on other pages but not on this particular one???.
I will have a look at lazy load in the meantime.`

`

[MarkHunte]

I probably missunderstood part of what you were saying ( I feel like I am eating spaghetti with only have a knife to eat it and making a mess everwhere )

If you want them to load from external then you have it correct.
If you want them from Hype then as I show.

Also have a look at.

Organized Asset Export Script to put resources in image/ media/ and js/ folders

Hype typically exports a single .html file and along side it a .hyperesources folder containing all resource library assets and scripts required to run animations. Many folks, including a fair number of Adobe Edge Animate “refugees,” have expressed the want or need for Hype to separate assets into distinct folders as is common with the web development. The Export Script infrastructure allows for this separation, so I created an Export Script called OrganizedAssets that will export in a manner …

Which can be used to organise the hype files on export. Explained in the link.

[aeroloop (Michel Buchi)]

checking out thanks, in the meantime try spaghetti with chop sticks…