In javascript I have a routine where I save gif image from URL to localStorage. On next page reload I check if there is something in localStorage and if YES - I display that gif from localStorage rather than loading it from URL. It works well!
I used this script:
https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/
The problem is that it won't work for animated gifs. The problem is (at least I think so) because on first page load gif is loaded in canvas element which is probably only 2d and one frame therefore gif saved to localStorage is static and not animated. When I read it from localStorage and display it, it will be static.
How could I save animated gif to localStorage and when I load it and display on page it would still be animating?
I was dreaming about a solution tonight. How could I not see it. I should load image1 (when loading the website - means internet is ON) then when I detect no network in javascript, I should simple display this same image1 over all screen (just make it visible) and I don't have to do any assignment which didn't work (image2=image1). Will try to do this today.
Related
I have a webapp that loads a collection of small images on a particular page. I want to show a load spinner on the spots where an image that has not yet been cached should appear. To check which spots should have a load spinner i want to check whether the file name of the image that should be on a spot is already present in the browser cache. If not then it shows a spinner instead while the image is retrieved by the browser.
I would also like to know if there is a way for angular to know when the browser is done retrieving all the images it didn't cache yet in the past. I would like to be able to subscribe to this event. When its done caching then the app can stop showing the spinner and show the images instead.
Angular is not going to know about what is cached or not. What you want to do is have an unloaded property that represents unloaded images
unloaded: number = 10;
And on each image put an unloaded = unloaded -1;
<img src="url" (load)="unloaded = unloaded - 1">
And show your spinner based on unloaded
<spinner *ngIf="unloaded"></spinner>
If i have an image element with a default src(ex. img1.jpg) and then with javascript change to a different image(ex. img2.jpg) it will load the first image and then the second image.
But if i change back to the original image(img1.jpg), will that image be loaded again(total load times: 2)? or is it cached in any way.
If not, is there any convenient way to cache it when doing such a thing?
The image src will load the image once so if you have "img1.jpg" many times in the page will only load it once but it will render it multiple times. So to answer your question you will not have a problem loading it again and again like in your example.
Modern Browsers these days create cache and maintain it till the session. In your case if img1.jpg is loaded first by the browser its cached though its being replaced by img2.jpg later. but if you go back to img1 it will load much faster as its cached already
Greetings from a future caveman,
I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db.
From time to time the video in question is changed or deleted by the author on youtube. This leaves me with 2 problems:
I'm loading the blank picture from youtube
In my db I still have this image url listed.
What would be a solution for figuring out the "missing video" thumnail, NOT displaying it, and updating my db. I need to fire an event by recognizing this image. Note that this is the default "missing" image that can appear different urls. So it's not a simple matter of seeing a particular url.
I also thought of using youtube api but making a bunch of calls every time the page loads seems counterintuitive to me.
I need to detect the image and fire so some of even for JS/jquery to use to update my db via ajax.
Maybe I'm overthinking this so if anybody has another solution to my problem I'm open.
I have read this: Javascript - Detect Youtube Default-Thumbnail
But the solution above does not seem to fit. The first option in the answer is what I'm doing now and it doesn't work - because youtube serves the default image even when you use 1.jpg, or 2 etc.. (which is what I use). Basically the video is gone.
The second option (base 64 encoding, creating canvas element etcc) is not really expanded upon and seems rather like using a chainsaw in place of a scalpel.
Thanks
I discovered that if I'm using
http://img.youtube.com/vi/<video_id>/mqdefault.jpg
,
it will display the trimmed (no black borders at top and bottom) YouTube thumbnail. The dimensions of this are 320 x 180px.
Whereas if there is no available thumbnail, you will get YouTube's fallback thumbnail, but that is actually 120 x 90px.
So here's a much easier way for figuring out if you got an invalid thumbnail (as compared to reading base64 data from the <img> tag).
Hope this helps.
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.
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.