I'm want to load images of products in a website with an animation of an hexagon grid
Hex_loading DEMO
I would like to know what is the best way.
I've read about inserting a gif, but I think image quality wouldn't be good; or video, but I don't know if it's to much for what I want (also I would have to load directly images for mobile devices).
Is there any other tecnology I'm missing out that would be a better fit for what I want?
Thank you in advanced
I don't think there is a way to change the loading pattern. But you can wait for the image to be loaded and then play an animation.
I suggest using a html5 <canvas> element to animate the images.
Related
I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance
Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop
You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top
I'm using videojs to embed videos into my html file.
I'm able to listen to certain events like play,pause,duration etc.,
Using these events i want to create an overlay over the video where the user can read some text or click a button or whatever. Basically,a sort of Interactive media.
This transparent layer has to be in the video.
I have looked at popcornjs and it does look awesome . But it doesn't solve the purpose.
How can go about doing this?
Any help or tips is much appreciated.Thanks.
Have you looked at the CSS Z-Index property?
http://www.w3schools.com/cssref/pr_pos_z-index.asp
It may just do the trick. Once you place a div on top of the video you can do all kinds of things, place canvas on there, draw things even.
Good luck.
PS: You may also run into this...
How to make this div go over embedded video
So I am pretty new to this but I am wondering for a web page that has a big image in the middle like github:windows page, how would do you work with the image inside that div/area depending on the screen size? is there a way to get images to resize or be cut off depending on either window size or screen size? is it typical practice to use media queries to change the picture based on the device? How is this done in css (can I reselect src in css for the img tag)? do you have to use a window resize js event to continually re-check like masonry?
I know these are quite a few questions (sorry) but I am really just looking for advice on best practice approach as again I am new to this....
always appreciated!
Adaptive Images may be what you are looking for. It offers dynamic resizing and caching of images based on screen size. It's very easy to implement and has very few dependencies.
On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?
You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:
Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}
One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/
http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.
Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link
I was looking at this gallery:
http://www.orangegirlphotographs.com/portfolio.cfm?galleryID=4
And just loved the way it looked, anyone have any idea how to get a similar effect using ideally CSS/JS and if not then using flash? Furthermore it would be excellent if you could move to the next slide by clicking on the image itself.
I'm also wondering how she is able to maintain height of the images when resizing (unless she is doing it manually which I doubt now days).
I normally use Gallery3 for my image uploading, automatic resizing with AnotherSlider to get a sliding effect but I would really appreciate it if you guys could direct me to something like this?
jQuery's probably your best bet here. I've used the Cycle plugin with slideshows before: http://jquery.malsup.com/cycle/
Look at the examples and you'll get an idea of what it can do: http://jquery.malsup.com/cycle/more.html?v2.23
For the height, either all the images have the same height, or simply setting it in html will keep the ratio. It's better to have them all the same height and resize them in something like Photoshop as the results will be smoother