Lazy load or image loading sequence questions - javascript

I have a task given by our project manager.
Basically he wants to load image sequentially. When the page first load, he wants certain sequence on the load process.
Although I already explained on how the browser works and created javascript that display certain sequence display, it doesn't seem to fit the requirements.
What he wants is if it's possible to use "lazy load method" when the page first started.
I know lazy load image is used if we have a long page(scrolling) and many pictures. User might not see all the pictures below, so it kinda wasting bandwith if everything load at once during web loading.
Thus, we use lazy load image, that images will be loaded when user scroll the page.
The question is if it's possible to apply this method at the first start of the page. So we can directly select the sequence and have the lazy load working even on the first display of the page without scrolling.
Lazy load that I used is = http://www.appelsiini.net/projects/lazyload
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
Thank you very much for your help

Yep just include the lazy load initialization in a ready function
$(document).ready(function(){
$("img.className").lazyload({
container: $("#DivId"),
});
});

Related

jquery first time page loading issue

When I first time load my website then images are jumping on each other
but when I refresh them it will look normal as I need it .
To see first time output of mixed images jumping on each other use
ctrl+shift+r
Jquery is creating problem when I load the website first time?
Any help would be appriciated.
This is not a jQuery issue. This is a network download issue. By hard refreshing (ctrl+shift+r), you are forcing the browser to re-download CSS assets, which increases the amount of time before it can properly style the page.
There is a front end design tactic that might suit you well in this scenario.
You have two sections that are "above-the-fold" when you first load the page. Instead of downloading an external stylesheet before rendering and painting these two sections, you can extract the "critical" CSS to a block in your HTML.
This ensures your CSS is there without wasting time with another HTTP request. For more information on what critical CSS is, I'd recommend this article: https://www.smashingmagazine.com/2015/08/understanding-critical-css/#what-is-critical-css

javascript button which stops the image loading process

I want to make a javascript (or jQuery if that's a possibility) button for my HP which stops the loading of the images on the page (for example when a user has to pay per MB and is only interested in the text).
I searched and searched and found answers like "remove the src", or "use window.stop()", but the problem is that they don't work, cancel the whole loading process, or simply don't do what I had in mind (like removing the images completely).
Does anyone know how I could achieve that?
Thank you very much :)
PS.: found a how to that claims that it can stop the download of specific parts of the site, but it doesn't really explain how to specify the part. I don't get how to link things here so here's the url: http://www.ehow.com/how_6104889_kill-browser-downloads-javascript.html
Thanks again.
Short answer: don't bother. If a user has such limited bandwidth that loading images is a problem, they will have disabled images anyway, or they will use some mechanism to load images on demand. You don't want to burden users with a non-standard solution that only works on your homepage. Simply put, it is not your problem.
Long answer: you can use placeholders instead of actual images on the initial page load, and then use Javascript to set the src attributes one by one, having each successful load trigger the next image. You will lose parallel loading though, which means you are punishing high-bandwidth users (which is the overwhelming majority these days) with much longer loading times, and you'll be spending a lot of effort on a feature that is (see short version) mostly useless.
You could try to change src to point to an empty image.
You won't be able to cancel the image loading process programmatically from within the web page.
You could try breaking all image srcs using JavaScript but it's a dirty approach, and your results may vary - it could be that the browser continues to load the resource nevertheless.
The best way to go would probably be either loading images on demand (which is possible to do from within the page), or offer the option of serving pages from server side that don't contain the images in the first place.
However, as #tdammers correctly points out in his answer, it's probably best not to bother. People on a traffic quota will take their own precautions against loading too much content.
I wouldn't bother replicating a browser configuration option with an in-page button, but I would recommend showing a placeholder image then lazy-loading the images for mobile users.
Also as you like JQuery, there are jQuery Lazy-Loading plugins out there.

Adding Image after page load

So I read this, what seems to be a very good article on the topic title:
http://www.rodsdot.com/javascript/Remote-Scripting-Images-(No-Need-For-AJAX).asp
What I don't understand is why it works?
I am fine with my work (monkey see, monkey do)but I figured why not ask.
Thanks,
Mat
Instead of loading all the images, css, scripts, etc.. on page load. This lets you load some images after the page load, letting the crucial part loads first.
It decrease the Page Load time, because it continue to load in the background after the Page Load was completed.

Suppose I have a list of 500 thumbnails followed by the title. How do I load the images as the user scrolls down? (JQuery)

In mobile, the internet is slow. If I have a list of 500 images, this is going to take forever to load. I'd like to load the title of the image in a list, but as the user scrolls down, I want to start loading/downloading the <img> tag. How do I use Javascript/Jquery to do this?
Try taking a look at this jQuery plugin:
Lazy Loading
The Lazy Load Plugin for jQuery should do what you need to do. http://www.appelsiini.net/projects/lazyload
Now, see Make images load when they enter visible section of browser?; apparently lazyload itself no longer works or is no longer available, but this gives other substitutes.

How to go about late/lazy loading resources

I have a fairly long page with sections such as Google Maps, image slider, Google ads, BrightCove video (optional) and images. Loads nice and quick without JS and a little slower with JS.
I saw this site and was wondering if anyone had used a similar approach or any other that allows these items to load once everything else is completed and in some cases not till the user scrolls the item into view?
Cheers,
Denis
Well as a starting point you could use the jQuery load functionality to load certain bits in which you know will take longer (such as google maps). This is very simple and can be achieved with:
jQuery(function(){
// Load google map
jQuery('#map-holder').load('/resources/lazy/map-loader.ext?q=' + an_id);
// Load similar properties
jQuery('#similar-properties').load('/resources/lazy/similar-properties.ext?q=' + an_id);
});
And then using the lazy loading plugin, im sure you could just put the above calls in functions and hook them up to the lazy load plugin.
Ok so what I'm looking at doing is using http://labjs.com/ for the js resources I need on the page at startup and then using http://www.codeproject.com/KB/ajax/selfloadelement.aspx as an approach for loading sections that can't be added to the page after the initial load.

Categories

Resources