I have a web app which displays a Java Script image carousel.
Showing one image at a time for n seconds.
When the html page (index.html) loads it loads all n images in an hidden parent html DIV and the app (JavaScript) is responsible for showing and hiding the parent divs for the images at a given interval.
This usually works fine, but some times (randomly) only half of the image is loaded (eg. just half of the image is displayed on the screen).
Sometimes only "half" of the index.html response is loaded making the HTML kode to bleed out to the display.
Unfortunatly I do not have any tools like Firebug etc. to debug the problem yet since the screen is a kiosk (screen hanging on the wall)
To me this seems like a network problem but I am no network administrator so I will just be guessing here.
As I said this happens randomly.
The image starts loading but only half of the image. Sometimes after maybe 15 seconds the rest of the image is suddenly displayed.
If this could be a network problem the what could it be?
Best regards,
bob
Sounds like it could be a network issue. Why not try and cache the images on the browser so you don't have to wait for them to load every time. Also try looking in the Firebug/Web Inspector Net panel and you should be able to see if the browser is waiting on a network response or not.
Related
I am currently developing a Javascript webapp and I want to display a list of 20 images.
In 90% of the cases this works fine.
But in 10% of the cases the first picture or the first 3-5 pictures are not loaded immediately, while the other pictures are displayed properly. The problem occurs on chrome on all devices
Then - After 20 seconds they are loading properly. I tried it several times - the delay is always around 20 and 20.60 seconds
If I copy the image links and open them in a new tab (chrome), then
The images that had a 20 seconds delay before, again need 20 seconds to load
The images that have been loaded within 20 ms before, are loaded as fast as before
If I copy the link into another browser (firefox), then all images are loading fast. If I restart Chrome and paste the slow picture link, then it is loading fast.
I am hosting my app and my pictures on IONOS Webhosting. There are around 600 images in the folder where I get the images from
My code for the image is very simple:
<img v-bind:src="https://www.myhomepage.app/imagename.jpg"/ >
image of the network tab
Where is your server? - Base on your question 100% of the issue come from the network.
I also catch the problem in the past ( the server locate at US ) and when I execute testing Singapore ( the image loaded very slow )
However, the client in the US never catches the problem.
i have a problem with carousel image banner slider. In first load my page is looks like this
Looks there are three consecutive images when i load page (those images should be banner slide). But after a moments (less than a second) three images are rendered in proper way. After a moment here is the view of web page
The problem is i want at first load web page i want a state looks like second image. Anyone know the problem ? i had just debugged via chrome debugger and nothing wrong with my javascript, could you give me any clue what is wrong with ?
Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.
The timeline shown here (captured using IE’s F12 developer tools) illustrates how IE handles a page
where an <img> tag is located after of a bunch of text :
The second row shows the retrieval of the image. Since the image is small, all of the image data is included with the HTTP response headers in the same packet.
However - The next timeline shows what happens when the <img> tag is located close to the beginning of the file so that it’s in the first packet of data received by IE:
However, the request for the image starts shortly after the first packet of HTML arrives.
As a result, it takes less total time to retrieve the page and the image
But (IMHO) it is better to put images (with defined dimensions) on the bottom of that page. ( so that the page will load faster)
However - by my example it shows that the page is loading faster when the img is on top.
What am I missing ?
P.S. my question is a briefly summarized text of this section
You are missing several points.
First, the best practices are not only about downloading, but about rendering as well, because if the whole page is downloaded for 3s but in require another 2s to be rendered, the user waits 5s, not 3s. I don't know best practice for putting images at the bottom (there is such for scripts), the best practice I know is to include width and height attributes so you do not block rendering while the image is being downloaded.
Another thing you are missing in your test is parallel downloading, as browsers limit the number of concurrent connections and you are testing with only one image. Make your tests with more images, or best - with a real web page, in order to have reliable results.
I'd rather bother about lessing number of connections, - loading whole page at once. Split interface and content parts. Once interface loaded - it can ask user to wait and inform him about connection speed. Then put a progress bar and inform user about how things go.
I'm dynamically switching background images. Naturally, they need to be preloaded to display promptly. I am preloading them, am able to following in FireBug as the images load. When the background image switches, I see the images download again in FireBug.
Here's my url: http://www.morganpackard.com/siteRoot/
Strangely, if I reload the page, everything works as expected. The steps I'm taking are as follows:
1) clear FireFox cache
2) reload page
Images load slowly, and, apparently are neither being preloaded nor cached. Every time there's an image swap, the image downloads again.
3) now reload the page again without clearing the cache
Images load and swap instantly, everything works as expected.
So it looks like I'm having to RELOAD before FireFox will read images from the cache. This is kooky. Any ideas?
Note: My images are ENORMOUS. I'll compress them, of course, but want to get this preloading this sorted first.
I didn't read your code, but for preloading to work, you must add the image to the document DOM, otherwise it can be garbage collected aggressively.
Checking with HttpFox, I am not seeing further http requests - when clicking around - for your background images after the initial load. If I hit "refresh" then the images are reloaded. I think this is correct and what you'd expect. However be aware that reloading of a page and its assets like images, css etc on a page refresh is dependent on both response headers and any over-rides for these specified in your browser/plugin tools. Take a look at pragma: no-cache and W3C Cache-Control (Section 14.9)
Edit: With firebug on, I am seeing reloads when I click around. This is presumably an artefact of Firebug. Turn off firebug and you wont have the reloads.