I am developing a website with a main page where a lot of products are displayed each with his own image. I would like to ask is there a better way to implement image loading to improve user experience ? I am not talking about optimization but purley about user experience. What I mean is should I let the image load slowly and the user has to wait on a blank screen for it or should I replace the image with a loading animation until it loads. Sure I have a loading screen for loading new products but I am talking about the whole product card is there all the data is there it just waits for the image and on it's place is a loading animation, I think this way the user will know that there will be something there and will wait to see it. If I should do that what is the correct way to implement it? Do I use promises to wait for the image to load or some other way ?
Currently I am using this way to load images <img src="url"></img>.
Related
I'm creating a website that loads some images on first load, then if a user clicks on one of the images the same image opens in a popup but bigger (Lightbox).
My question is, is it better to just use the same large image and resize the dimensions for caching (So the user already has loaded the image) or is it better to first load a smaller thumbnail then the bigger image once the pop-up opens?
I'm trying to reduce site speed as much as possible as there are a lot of images.
I'm using Masonry for the site and Magnific Popup for the image expand if that helps.
the thumbnail image size is around 100kb whereas the larger image is between 200-300kb.
The main idea of any lightbox-type script is that they allow you to display preview images (thumbnails) on your page and load larger versions only when needed (e.g, when user clicks on the thumbnail). This greatly helps to reduce page weight and load time. Modern scripts (like fancybox) can display preview image while larger version is gradually appearing over it thus relieving users from staring at blank screen.
image = "Your image link / location here"/ZoomService
image.Zoom(100)
--if you use MilkWar web coding use that
My website for architectural visualization: http://www.greenshell3d.com
I noticed on the networking tab / incognito it takes 15 seconds or so to load the above-the-fold content. (most notably the image slideshow.)
Some of the images in the slideshow load at the very end instead of the beginning of the website load process. Now I understand the browser handles this order, but perhaps there is another way. As it stands, the bounce-rate is too high and I expect it is because of load time.
I've seen a jquery snippet on github that allows one to control the order of image loads - do you think this is a good option? I'd be glad to hear any opinions before investing the time to fix this.
Any ideas? Thanks!
You said you are interested in any opinions as well, so first some general thoughts: There is no page fold. The web that we produce content for exists in so many different screen sizes + resolutions that it’s impossible to say "The fold is below this big image!". Yes, Google changed the pagespeed insights tool to make people load stuff on top of the page first, but I think their wording there is really bad.
Now to your image loading issue:
The first thing I would recommend is to reduce the size of all the images. They seem to be around 280 - 300 kb per image and you have a few of them. Since there is a translucent overlay over them anyways you can probably get away with reducing the image quality without people noticing it (because they don’t see the image directly). Play around with the values here.
I would then look into optimizing the code for the slider to load the first image first, then the rest of the page and the other images asynchronously maybe after that. Another trick could be to increase the slide fade time from the first slide to other slides so the slider doesn’t change if the next image isn’t ready yet. You said you found a jQuery script to implement that, that’s where I’d start.
As a general guideline: the position of requests in the source code usually determines the load order of things on the page. If your images are requested by JavaScript at the end of the page, that lead to the images being loaded later than you want them to be loaded.
I have a web application running on local host. The requirement is to load multiple rectangular jpg images (96 images, average 7k in size each) and show on home page when it runs. Images are showed in a grid of 8x12 rows/columns. I am loading image by setting the 'src' attribute of the 'img' in javascript. The url assigned to the 'src' attribute is same for all images but the image id is different. Images are loading but the main issue is that they are not loading very quickly and they are some what loading in a sequence means 1,2,3,4... and so on but some images are not loaded in sequence. I want to improve the performance of this page. I have tried the figure out the timings at different points like:
When call is originated form client (image src attribute is set)
When server is receiving call. (the page on server which serve individual image)
When server is about to return the image.
When on client side image is received/showed (image loaded event called in javascript)
It turned out after looking at the collected data that main time is lost between 1 and 2 above that is between the client side call is originated and server is receiving call for a particular image.
I have also tried setting parameters like maxWorkerThreads, minWorkerThreads, requestQueueLimit and maxconnection in machine.config but no significant improvement yet.
Can someone please help me in this situation as i am stuck here since many days and i am really short of time now. Desperately needs to improve the performance of these images loads.
Thanks in advance.
Since you stress the lack of time, I would advise you to try a jQuery plugin that loads images on demand. The gallery in which you load the pictures, does the user scroll in it? Or is it 1 big field?
If it's a gallery the user can scroll in, I'd strongly suggest you take a look at lazyload. What this plugin does, is it fetches the image only when it is needed. As long as it's not on the screen, it will not be loaded. For a brief example, have a look at this demo.
I hope this can help you out.
I'm developing a site which has a slider on home page.I'm using nivo slider.
The images in the slider are of sizes 1600*1200.Due to this the home page is taking too much time to load.
Is there a way so that the images sizes are reduced on the fly or I've to first compress each image and then upload it to the server.
Is there any other alternative method, please suggest one if any.
You can load the images asynchronously with help of jQuery. Here is the tutorial for loading images in nivoslider asynchronised. This will reduce the page load time tremendously.
You can load the 1st image before the others, which is enough to show the slider. Afterward, you can asynchronously load the other images.
I am a scriptmonkey working with a lot of graphic designers who know not a thing about the web.
Despite my objections I frequently find myself with problems such as a 100Kb background image, several textual items they have made into glossy images, and 3 separate lengthy FLVs loading into a page etc etc.
I would really like to define a stack to control the flow of items loading. Eg, render the background, then the HTML, then the page images, then load the FLVs.
I assume this exists and I have been searching badly.
Can anyone point me to good resources on this?
For the images you can use the load event of the images to know when they are done. So you can chain loading this way. Look this: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html