I'm looking to do something on the lines of how niice.co load their images via lazy loading.
As you can see from their website when scrolling, before lazy loading the image the background of the div where the image is placed is actually the dominant colour of the image.
I've looking around and found some plugins such as http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ but don't know how they're merging the two.
Will not work. The image isn't available while loading. You can check the color in your backend. Then: Save the color in a db and output the hex as data-attribute and use it as background in javascript or directly in the element style. Or another solution: Use the adaptive background libary if the color isn't saved. Then: Call a backend API and save the Hex. At the next request you can use the hex with javascript or in the element style.
Edit:
Thanks Empiric for the HowTo Link: https://manu.ninja/dominant-colors-for-lazy-loading-images
One more performance Tipp: Doesn't load all images at one time. It's a better UX to split the requests. If you have 8 images, 4 per line, load the first 4 images. If they are finshed: Load the second line and so on. One more important thing: If you have small profil images etc. (like stackoverflow) doesn't load this images while the content images are loading. The visitors focus point is the most important point.
Related
I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.
I would like to have my background images ready before the HTML loads.
But, what is happening is some of my HTML elements like input elements are being loaded before the image is loaded in the background.
I have looked at lot of questions where they show how to preload the image. But, that some how doesn't solve my issue.
This is not what you want to do.
For the user this will result in decreased usability and a lack of responsiveness. You'll lose visitors very quickly making them wait for something. Take it the opposite direction and fill in the empty spot with a color while the image loads in the background.
However, if you really want to do this, there is a way to line them all up and load at the same time. You can convert your images to Base64 encoding and paste the code directly into the HTML or CSS.
Here is a very good article on Base64 encoding images and including them inline. Essentially what you'll be doing is turning a picture into text, pasting that text directly in your HTML, JS and/or CSS and then the browser turns it back into an image.
Use your favorite image editor and get your images down to < 32KB, then upload them to this page that will convert it into a long string of characters. If they are larger than 32KB you'll notice browser performance issues as well as incompatibility with Internet Explorer.
You'll take that string of characters and paste it directly where you would normally put the image URL. So if it's in HTML as a standalone image, you would say:
<img src="data:image/png;base64,iVBORw0KGgoAAAA... etc" />
For a CSS image (background-image, for example) it would follow this format:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAA... etc);
Now, depending on how many you include in each file and how large they are, your site will not be very fast to download at first but after caching it won't be a noticeable issue.
You have to delay the loading of the html part. Use any javascript image preloading technique, like this one:
var x=new Image();
x.src="whatever.jpg";
...and then, use $.load(...) to load any further html into a div that's initially empty.
I have several 1000s of images on disk that I need to display a subset of, given user search criteria. What this means is I could be showing 100s at one time. Each image is large- 3510x1131 to be exact. And I need to do some light image processing before they are displayed (adjusting brightness and contrast).
My application to do this is a Web.API app using jQuery.
My first pass was to just pass the URLs to the browser and then size the images and make those adjustments using pixastic. Works, but it's pretty slow.
I was thinking it would be much faster if I could resize the image before doing the adjustments, but I dont want to create copies and then link to those. Maybe there is a way to generate the images on the fly and serve them up? Via REST perhaps? Bottom line is I need a LOSSY image resize, not just setting width and height using css.
Are there tools out there that I am missing or has anyone done something similar? I think what Im looking for is exactly like google image search results- but I don't know how they generate those thumbnails- and if I were to adjust brightness/contrast am I doing it on the thumbail (saving time) or the full size image?
Many many sites uses this technique (facebook, google as well)
For example, open facebook.com
Save this page (not as *.MHTM but HTML with images) (mean login page)
It saves:
facebook_files(dir)
facebook.html(file)
Then inside the folder, You can see one GIF file which containts all primary images for the page.
The question is: How to read many chunks inside one file??
And how to call this approach?
Those images are called "sprites". Take a look a this article on them.
The basic idea is that whenever you want to use an image from the sprite, you have an element which just shows part of the big sprite image. So each "image" in your page is actually a div with this image as the background, just offset so the right part shows through.
The main advantage is that your page needs fewer requests and so loads faster.
There are some tools online that make using sprites easier. I haven't used any of them so can't recommend one, but using a tool would save you a lot of work.
This is what you call "spriting", like the spriting used in arcade games (one image of a character with it's different positions). Basically it's one huge chunk of image containing smaller images.
The advantage of this approach is that instead of 100 different HTTP requests for 100 tiny gifs (which causes overhead), you only need to request one huge image containing this 100 gifs. Then instead of using <img> per image, you use the CSS background instead, then use background-position to align the right image "through" the container to show the right image.
how can I change the way an image loads on a web page? I presume using javascript to do this. I'm looking for a way to have the picture load at a lower resolution and then get "sharper". As appose to loading downward, if that makes sense. Facebook does this with their "theater" picture pop-up window.
This is actually due to the way that the image is encoded, namely images that are interlaced will have this effect.
http://en.wikipedia.org/wiki/Interlacing_(bitmaps)
Check to see if your image editing utility has this feature, applications such as photoshop definitely will but something as simple as paint won't.
Sounds to me a lot like progressive loading in jpg images. That's something you have to adjust while creating the image. I'm only familiar with the gimp, there you have to check a checkbox while exporting to jpg. Check out this screenshot.
Another way to achieve this is to initially point the images on the webpage to smaller images and then do some stuff with some jQuery plugin. I'm not sure right now but I think there was one called jQuery.lazyload or sth. like that.
Hope it helps you!
To do this you don't need javascript. It is actually part of how you saved your image. You should make your image with progressive option. It adds a little weight on the image, but it will show parts of image as it is loading.
To do this on Photoshop:
Open your images file
Choose File
Choose Save for Web... option.
On the opened Dialog select jpg
On the upper right corner there are few options. Check 'Progressive' option
You are done!
Now replace your image and all the browser will show that image as they are loading it.