Phone web page is first opened images placeholder - javascript

I made a phone page, just open the page because the images is not loaded completely instantly lead contents all stacked together, waiting for images to load after the page was completely normal.
So I think to make images width, height attributes, but different phone size, the width of each images is change, resulting in a height to be recalculated, will slow in the inside pages through javascript computing, the problem is not resolved.
Is there a way in PHP controller which will calculate the width of the page? Then directly assigned to the page?
Or is there other ways to solve this problem?

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.

Loading large number of images without affecting user experience

This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?

Does dynamic image loading decrease server overload?

Example if I make a script that loads images only when user scrolls page to the location of where the image should be, would that script reduce page loading time and is it better in the long term?
You wont decrease the time for the dom to become ready and displayed (at least not by much). Images are loaded asynchronously by the browser and thus placeholders are put in place of images until they are fully loaded.
I would however suggest as you said implementing a script that loads images as they are needed, no point wasting peoples bandwidth with images that aren't needed. (If you have a lot of images), for example like google image search.
Bear in mind, if a user loads a page and scrolls down very quickly, a page that laods all images at once will have to wait for all images to load to guarantee the ones in view are displayed. If you implement some sort of script you can control the way and order in which the images load.
Yes, you will reduce the loading time, but you will make your users wait for images to load when they scroll down.

Executing JS/jQ before images fully load

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.

Javascript: Possible to get image dimensions before images are fully loaded?

I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.
The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.
What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.
I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load-- before the images fully have loaded.
Thanks!
*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)
This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.
Otherwise you're in a chicken-and-egg situation; you can't magically find the size of the image; you need to download it first!

Categories