I am using this tutorial http://css-tricks.com/seamless-responsive-photo-grid/ to create a grid with lazyload as you can see here in action http://jsfiddle.net/gaz2A/
The problem is that the images are loaded like
1|3|5|7
2|4|6|8
instead of
1|2|3|4
5|6|7|8
and leaves the start screen blank at the most part.
How can I change this ?
*I tried masonry plugin with infinite scroll, however I do not want to rely on static pages, so masonry is not a choice for me.
Images will load in the order they are presented in the DOM.
Either change the DOM representation so that the images are appended into DOM in the correct order (eg. side by side first), or use some JS based preloading to preload the images in the order you want.
Related
Overview
So basically I have a carousel that I am populating with images using URLs from a JSON file. I loop through this JSON file and set each URL into a data-src attribute of an image and set it to lazy load in the Owl Carousel. However, I do not know what the URLs provided to me will be, nor do I know if they are broken or not. These are fairly high resolution images, so I would ideally not load them more than once and not load them all in at once.
Problem
However, an issue arises when I occasionally encounter a broken image link when I make a request for the links. I don't load the images prior to setting it in the carousel, so I don't really have a way to check to see if it's valid or not. I am trying to find a way to remove the broken images prior to the lazy load of the image without causing a very long load time or any abnormal movements in the carousel.
What I've tried
Loading the images in prior to loading the element. This causes a significant increase in load time which I would like to avoid if unnecessary.
Using .onerror to remove the images when they are loaded in, but broken. This was fast, but causes weird errors in the movement of the carousel. Also, if I want it to be completely reliable, I have to jump back to the prior slide, and jump forward again. For example:
$('img.owl-lazy').on("error", function () {
var carouselData = carousel.data('owl.carousel');
var index = $(this).parent().index();
carousel.trigger('remove.owl.carousel', carouselData.relative(index))
.trigger('refresh.owl.carousel')
.trigger('prev.owl.carousel')
.trigger('next.owl.carousel');
});
This ends up creating weird animation effects where it looks like its moving backwards to get to the next slide.
Loading in each image and adding them to the carousel as they arrive. This did seem to load the images faster, but ended up creating a stacking effect in the images until they were all loaded, in which they were then placed into the carousel correctly.
Just removing the element associated with that slide using .remove(). This ended up causing weird navigation issues with the carousel.
If anyone has any strategies that they would recommend I would very much appreciate the advice. Also, if you need more code I would be happy to include it.
Edit 1: Example
Here is a Codepen giving an example of the issue I'm coming across. (I replaced my standard ajax call with a bunch of duck pictures, so in a standard scenario I would not know the URLs being provided in advance.) Also, note that the carousel loads in 3 or 4 of the images towards the beginning of the carousel to provide a bit of a buffer. There may be images with broken links included in this initial buffer as well as towards the end.
Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.
I've tried every single instance of css, javascript and jquery initializing that I can think of to get these images to load like a normal masonry pattern but, they keep stacking vertically.
Most of the time the images stacks properly but, when the page finished loading they stack vertically. one by one.
Keep in mind I am using images not the blue boxes. I think the correct way should be in this codepen.
Using a masonry layout for this site and upon the first load each box overlaps. If you use any of the navigational items to sort or even just stay on "all" they rearrange themselves. Any ideas?
I don't have a reputation of 50 yet so I can't comment, but I wanted to share a couple tips that I stumbled upon in the past as I've used this plugin a lot, and it could help other people.
First off, I definitely use the imageLoaded function as Sarah mentioned, and not the onload. (https://github.com/desandro/imagesloaded)
Tip 1 -
To speed up the isotope plugin getting to work (useful if image sizes are big, or you have a lot of them), you load a placeholder image for each container, then after the imagesloaded plugin fires, you can have the isotope plugin get to work quickly. Then you can swap the real image in with a data- attribute that contains the real src url, just do so using the isotope callback (http://isotope.metafizzy.co/events.html). The only caveot is your images would need to have the same dimensions as the placeholder or the sizing of the containers could get messed up and overlap again.
Tip 2 -
I never actually did this, but one method I was thinking of using was to load the images as a background image of the container, set a height and with for the container (or at least the image part of it), set the images as background-size: cover; and then you don't need to worry about the images loading before the isotope plugin can get to work.
I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)