So this is really odd.
I have a few SVG files that are local in the project with a path /assets/images/image.svg
Now the maximum size of these images is 25kb however whenever I open a page that contains an image the loading still doesn't appear instantly which means that is a little flicker before the image is loaded.
Has anyone experienced this before and know if there are any way to optimize the loading? It seems excessive to include some sort of library to handle images of this size?
Related
I'm building a very small SPA (angular) website, put it has a large number of mid-quality images.
At the moment, when I have more than ~15 on the site, and go through viewing each of them (the site is a sort of image gallery), the page/tab/browser crashes.
How can I effectively manage this, so that more images can be used. Is there a way to unload images from the browser memory?
Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.
I have small sized <img> in which I put very large pictures. This makes image loading slow and is a waste since I dont really need to download the whole big picture, I show it in very small size.
Is there a way to make HTML load lower resolution images instead of full image resolution? so the loading will be quicker.
There is no feature of HTML (that I am aware of) that automatically generates a thumbnail sized image for you for faster loading. Some sites will do that automatically when you upload like on Wordpress or various e-commerce solutions. So unless you are using one of those, you will have to do your own image re-sizing, before you upload, or write your own feature of the site that resizes images on the fly on the server side.
You have to do this work on the server side, since HTML/CSS/JS are all client side only (node.js non-withstanding) and could only do the resizing for you once the image was already downloaded, which defeats the purpose.
I am drawing many frames on a canvas using KineticJs library.
I am creating a new javascript Image object with the relevant image source for every frame and setting the new image on the canvas after the image loaded.
I see that it takes about 22ms on chrome and about 600ms on ipad safari ... that's a big difference, has anyone experienced such a behavior and does anyone have any insight on how we can overcome this issue? For example maybe I can force the ipad to use its gpu.
Any response will be highly appreciated.
This page says that iPad cuts off loading images at 6.5mb. I'm not sure if this is still true but I've definitely noticed throttling before 6.5 mb.
Since I'm using a photo scroller, what I've done is load the image names in a hidden html field and then load the next image in a hidden image tag 2.5 seconds before the scroller displays the next image. Of course, you could also load the image names in a JavaScript array. I can provide code snippet if still interested...
So I'm attempting to load images in javascript dynamically as the user is scrolling around. The entire application is offline and is written in HTML and javascript. The "scrolling" around behavior is done through CSS3 animations.
The problem is that when I set image.src = "foo.png" it blocks the UI until the image has loaded. Is there a way around this?
How long is the UI being blocked? If it is local then I wouldn't have thought it much at all.
Anyhow, the reason the UI may be being blocked is because it needs to download the image to determine its size. If it doesn't know the image size it will not know how it will affect the layout.
The first think I would do is to set with and height attributes as soon as the tag is created.