Executing JS/jQ before images fully load - javascript

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.

Related

Lazy load for table

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.

Possible to make a jquery hide function run until the item it is hiding is ready to be viewed or modify a slider to be more intelligent?

I have a page with a pdf that gets displayed inside a slider. When it's loaded it's fantastic however it looks a touch ugly until that point as the scroll arrows will be on screen but the dimensions of the slider haven't yet been established so it's all bunched up.
I created a white div that was larger than the pdf and targeted it with a jquery function that after a certain amount of time would hide and reveal the pdf underneath.
Th problem is that some pdf's take longer than others to load. I don't want someone to have to wait 5 seconds when only 1 may be needed and I also don't want someone to wait 5 seconds only to then see the 'mess' that I was trying to hide as that pdf may take longer to load especially taking net speed into account.
What I'd like is either for the function to know when it should hide or a way for the slider to be 'better', possibly already knowing the size of the page, loading the first and then while that it being read the others could be loaded in the background?
Any ideas / help would be appreciated.
Thanks.

How can I combine an image slider with scaling images?

I have a bit of a dilemma in the sense that I can't seem to get a jquery image cycler working with scaling images.
What I basically have is a website with a small navigation list at the top, and then full screen images which can be cycled using a control at the bottom of the page. Previously I've used backstretch to get the desired effect for a background image that stretches with the browser window.
I was also hoping on using Jquery Cycle as the plugin to do the image slider (as I've used this countless times before).
The problem is that I need the effect of backstretch (ie. scaling images) but with a slider. I have tried using other plugins for the stretching but most of them only seem to allow the images to be scaled down (if the window shrinks) rather than upwards. I can't use backstretch because it takes up the entire body tag. I only need a container div to contain the stretched images (so I can have the header/navigation sitting at the top without cropping the images).
However I have no idea how to then get this to work with Jquery Cycle.
Has anyone done this before or have any examples of this working?
Thanks
May be late but take a look at http://jongaulin.com/2011/11/17/fullscreen-image-and-content-slider/. I hope this works for you.

Is there a way to use JavaScript to crop & resize an image before displaying it?

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...
Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?
Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..
You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.
However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.
Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.
Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.
But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.
Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.

Dynamic number of thumbs according to available area in a webpage

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!

Categories