SITUATION:
My page has about 500 <img> elements that are dynamically generated and populated with image urls from an API request that refreshes the data once per hour.
PROBLEM:
Every few page loads, a good amount of images fail to load the image with error code 0().
WHAT I TRIED:
I also tried putting all the images directly in one of my website's folders and loading them from there and the same behaviour happens.
Some times all images load without any issue, sometimes a good number of them fail to load.
QUESTION:
How can I make sure the images always load ?
P.S.: I checked the image urls when the images fail to load, the urls are correct.
Screenshot attached.
EDIT:
To be clear, my question has most likely nothing to do with the requests themselves since the image urls are properly loaded inside the <img> tags, it's the images that fail to load, not the urls.
It might be difficult to figure out why some images sometimes fail to load. One strategy could be to check if all images were loaded.
See: Is it possible to reload a specific image if it did not finish loading after a preset amount of time? javascript/jquery
Here's the sample code from the accepted answer that should work for your scenario:
var images = $('img'); // Get all images. (you'll want to modify the selector
// to work with only the desired images)
images.load(function() { // Add a load event hander that removes
images = images.not(this); // each image from images once loaded.
});
setTimeout(function(){ // After 10 seconds, iterate over each remaining
images.each(function() { // image, reloading each one
// reload this image
});
},10000); // run after 10 seconds
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>
I am trying to figure out how to optimize a duplication of an image. Basically I have the same image in four different sections. However, the sections are controlled with toggle tabs, so only one shows at a time.
Is there a way for the browser to not load the image until the tab is clicked or for the browser to load the image once, rather than four times and then to just echo it?
I thought of doing something just like the following and then echoing it, but won't the image still load four times?:
$target = '<img src="../images/target.jpg" ';
I am fine with the image loading multiple times, but not on page load, to allow for reducing the initial page load for the user.
If this is confusion at all, please ask for more information.
A Useful Tutorial And Explanation
The same image will only get loaded once, the browsers doesn't load an image anew every single time the source gets mentioned, even when the alt is different
PHP
With PHP you can only influence what HTML is send to the browser. But, you want the browser to load your image after the rest of the page. With PHP, you cannot tell te browser to do so, it treats all HTML in the same way.
JS
To do the trick, the image can be loaded in after the page has been loaded. Since the image is not visible yet on the homepage, this does not matter.
To make the browser load in the image afterwards you can give an <img> a fake src and an attribute containing the real source, like so:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="THE_LINK_TO_YOUR_IMAGE">
data-src now contains the real link to your image.
With the following JS you can then change out the data-src attribute to become the src attribute, after the page has loaded. The image will then load immediately after the page has finished loading:
JS
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
The JS should come just before the last body tag, to further decrease loading time.
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
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 have a bunch of images that I am preloading inside of a loop. One of
these images is also loaded by the html, so I get a good look at how
these two different methods perform. For measurement, I am using the
Network pane of the Safari Web Inspector, after clearing the cache.
The ClownFish image is 280KB, and when referenced by the HTML takes 14ms to
load, while the Aurora image referenced by JS in the preload is
116KB and takes 77ms to load.
var images = ['Aurora', 'ClownFish', 'DewDrop', 'EarthHorizon', 'FlowingRock', 'GentleRapids', 'GoldenPalace'];
images.each(function(elm){
var path = elm + '.jpg';
var preload = new Image();
preload.setAttribute('src',path);
});
Is this all overhead from setting up the Image() and then assigning
the src to it? Is there any way to speed this up?
Have you checked if this is also the case in Firefox (using Firebug)? And are those load times how long it takes to retrieve the image itself? Or is it how long from the start of the request until the image is loaded?
If the latter, it could have something to do with where/when the javascript gets loaded on the page, or the browser already has too many requests to the domain the images are on and has to wait until some of those complete before preloading your images.
I'd also be curious to see how long the load times are if you don't preload the images at all. Do you get low load times for all images if they're loaded by the html? If not, then maybe the web server is the issue.