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.
Related
I am creating a web-site that drives content for a large 2D area off a CMS, so I have a system that runs on a timer, examines the part of the area that is currently on-screen, and loads content that is close enough to the view area that it might soon come into view.
This all seems to work quite nicely, apart from one small glitch.
Some of my content is SVG elements created procedurally via JS (the load mechanism feeds data from the CMS into JS functions, which create the using document.createElementNS and insert it into a div in the correct absolute position).
This content appears fine if is on-screen at the time it is loaded (this happens when the page is initially loaded).
And it also appears if it loaded while an animation is moving the visible area (animation is used to follow paths across the 2D space).
HOWEVER, if I am manually moving the visible area (which I have implemented via click+drag) then the SVG elements are added to the document tree, but when they come into view they do not render.
If I do something to "nudge" the renderer, such as hiding an unrelated element via DevTools, or resizing the window slightly, then they appear.
I am thinking this may be a bug in Chrome? e.g. where it has initially decided the elements need not be drawn and does not reprocess correctly when that needs reconsideration? Or maybe I am missing something, I am only semi-experienced in manipulating HTML documents via JS (but after a quick look I do not see the same behaviour in firefox...)
I am moving the visible area by changing the (left, top) of a parent element (I do not want to use scrolling for that as the size of the 2D space is not defined in advance...)
Otherwise, is there some way I could trick the browser into recalculating what should be drawn? I was wondering about having a small transparent element on screen that I show and hide on a timer, although a workaround that prevents the problem in the first place would be preferable...
Thanks for any advice!
Ian
p.s. I cannot instantly produce demo code for this as the code-base is moderately large, but I will spend time to make a simpler example if that proves necessary...
I have a landing page that has a header, a sticky footer and a main area with a Video and placeholder image. Using CSS, I do some calculations to make the Video area of the size that is available, but it doesn't work for all screen sizes, so I have to resort to resizing the elements in Javascript via the onresize event.
The problem is that I see the page render at first with element sizes that need correction, and then it gets corrected by javascript almost immediately ( < 0.5 seconds). I see this happening visually and am wondering if there is a way for me to delay the original render and simply see it when the elements have been correctly sized.
In the past I experimented with making the tag not visible to start and then making it visible in javascript. Is that the best approach to achieve what I am trying ?
You can achieve this by hiding the content using visibility: hidden in CSS and changing visibility to visibility: visible once the JavaScript processing is done.
I generate a PDF File from a HTML Source. Each Page has a height of 1402px. First solution was, a DIV for each side.Placing Footer and Header was easy then. Problem is: if the content (dynamically generated) doesn't fit the page div, it overlaps the footer and in worst case, destroys the layout. So all the Pages and their content goes into one div, but how do i add 300px of margin, which I need for Footer and Header?
I tried to display my problem in this picture:
The whole white thing is one Div.
The black lines display each page in the Div but they are not in the code.
The green lines display where I need a margin so the red content doesn't overlap, but continues on the second page instead.
Red -> current situation
Blue -> what I need
I can also use Javascript in the document.
Can you help me?
http://i.stack.imgur.com/iMFBb.png
Here is the fiddle of how its solved until now:
https://jsfiddle.net/8yvpavd7/1/
I suggest you ensure that the height of your page is lower than a specific limit. Since you are using absolute sizes and positioning anyway you can easily check that using jquery (example:)
$('#page1').height() / $('#page1').outerHeight()
Since we don't know anything about your datastructure, i can only assume what you need. The following fiddle should explain what i'm talking about https://jsfiddle.net/rkvs5s1z/2/
You could remove parts of your content until it fits the height. You need to store the removed data.
The fiddle does not store the data in the correct direction - it should only demonstrate how this could work
Afterwards you append a new page including your headers and footers.
You might need to repeat these steps if the content of one page is bigger than two pages.
I would also suggest to improve the shown example by not slicing single characters but complete words. If your pages contain html you might also need to check for html code and correct nesting.
I have the following code, it calculates the width of a group of images in a horizontal gallery and applies it to a div so that they all fit:
jQuery(window).load(function() {
var totalwidth=0;
jQuery('#gallery img').each(function(){
totalwidth+= jQuery(this).width() + 15;
});
jQuery('#gallery').width(totalwidth+100);
});
The problem is, in a gallery of 100 images, no images are visible until all images are loaded. I don't know how to get around this, I want the images to load one after the other as they would on any other site.
Can it not calculate the width of all images, then apply that width to the div and load the images so the user can start browsing through them? Or does it need to fully load an image to obtain the width?
Thanks
Without a bit more information on your html elements and exactly what you're trying to achieve it's difficult to give more advice but here's a first stab:
Javascript is client side scripting, essentially if your browser doesn't have the information, javascript doesn't. So, to get around that you could initially hide the images or their container and in your loop show them one by one as the function executes on each image - that way the calculation is done before the image is shown but the user feels like their getting a more instant response.
The browser knows the size of the image, when it's loaded.
You could put them in a hidden div, calculate the sizes and then display them one after another. Maybe this would work out for you.
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!