Does dynamic image loading decrease server overload? - javascript

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.

Related

Phone web page is first opened images placeholder

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?

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.

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?

Stop GIFs from Preloading

I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks
Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});
You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.
You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.
Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.

JavaScript image preloading

I have so many images in a slide show and I need serve this slide show on mobile Safari. I noticed that whenever the page loads it gets stuck for some time until all images get loaded.
I decided to load images with a click event when ever I need them for specific action instead of appending all images directly into the HTML.
I want to use image pre-loading script and then I will add the image depending on the user action.
Will image pre-loading effect the page load time, or will this help me to improve the page load time and adding images as needed?
Also do let me know if there is any other way to achieve it. My goal is to load the page faster and also want to add images as needed which will not effect the animation quality and image rendering.
Image loading script
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
Use CSS:
a:hover {
background:url("menu2.gif") left top no-repeat;
}

Categories