I am fetching all my friend's profile images and making a widget which will display images one by one on next button clicks. When I make a request to facebook server, in response while html is rendering I can see all images getting displayed on browser and once loading is done everything fits perfectly in widget. How can I avoid these image pictures getting displayed while my page is still loading.
I have heard something about lazyloading which will load images only when page is scolled down. I don't have any scroll down option nor have any idea how to use ladyload but is there anything similar which would be helpful to me?
You could use css to hide all the images in the widget:
#widget img {display:none;}
Then use jquery to show them when the DOM is read yand all images have been loaded:
$(document).ready(function() {
$('#widget img').show()
});
Something like this would work.
If you need to develop only to supported browsers [check it here] https://caniuse.com/#feat=loading-lazy-attr
you better use built-in image lazy loading like this:
<img src="https://picsum.photos/id/300.jpg" loading="lazy" />
There's various options for lazy loading images, so long as you use JavaScript.
There's quite a few libraries to help you, such as jquery's lazy load plugin: http://www.appelsiini.net/projects/lazyload
Or various alternatives you'll find via our old friend Google :)
Use the jquery Lazy Load library. Here is a nice introduction: http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22
You can use jQuery.
jQuery is "A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX."
Jquery scripts are usually started with this commands
$(document).ready(function() {
// put all your jQuery goodness in here.
});
so the commands will only be executed after the page is completely rendered.
Here you can find some jQuery Tutorials
Related
I like how Lightbox does that overlay window that displays the full size image link. Is there a way to load an html file like that? I would like to have pictures, text, maybe an embedded youtube video too all able to load in that "Virtual Window", Vertical scrolling would be nice too. I would like to avoid jquery or other things like that. Like just Java, html, and css would be nice. But if that isn't possible I can handle calling the jquery if need be.
Thanks in advance to all you savvy people!
Eva
Recently, I've spent a lot of time trying to find nice no-jQuery lightbox. And I only needed to display images, not videos or HTML. My searches failed so in the end I had to give up and include jQuery in my site.
Once you give up have a look at Jquery Colorbox.
It has directly implemented display of images, YouTube or other videos as well as dynamically loaded HTML. See their examples.
Unfortunatelly, this library requires JQuery
My website has tons of large images that reduces my site speed. I want to load all of the images of my website after the website is loaded without them.
What is the best solution to do that??? I want it in jQuery. Any NICE JQUERY PLUGIN suggestion is appreciated.
Thanks in advance.
My favorite is http://www.appelsiini.net/projects/lazyload
I used to do this on my ASP pages.
Just create all your images tags like this
<img ID="img_1"/>
Once this is done, with Jquery :
$(document).ready(function(){
document.img_1.src="YourImageUrl";
});
There you go, as soon as your page is done loading the content, it will show all your images.
I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site:
http://marckremers.com/2011 (Still not complete, in alpha phase)
As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).
I'm wondering if there is a way i can make it click into place first and then load the elements?
I tried putting the reposition script just after , not even that works.
Any ideas? Thanks
With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.
You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.
If you want to go further into optimization I would also:
Use one external javascript file. Yes
it increases size, but I favor that
over http requests.
Minify your html/javascript/css.
Don't host jQuery on your site, use a CDN such as Google APIS.
Check out a service similiar to Amazon S3.
I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.
You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.
To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets.
use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.
A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?
Generally you only want to trigger your events after the page has rendered, i.e., using
$(document).ready(function()) {
//your javascript goes here
}
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.
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.
I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.
My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?
So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?
Thanks,
Ted
This is a pretty good plugin for jQuery that handles image lazy loading.
http://www.appelsiini.net/projects/lazyload
Images below the fold wont be loaded until they are scrolled into view.
It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.
For an example of this technique in use, check out http://mashable.com/
try this jQuery Lazy Scroll Loading Plugin
http://code.google.com/p/jquerylazyscrollloading/
You can try this jQuery plugin I wrote that uses html comments to lazy load any arbitrary bits of html, including images:
jQuery Lazy Loader Blog Post
jQuery Lazy Loader Plugin Page
Here's an example:
<pre class=”i-am-lazy” ><!–
<img src=”some.png” />
–></pre>
<pre class=”i-am-lazy” ><!–
<div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>
<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
$(’pre.i-am-lazy’).lazyLoad();
});
</script>
So basically you wrap the content you want to lazy load with a placeholder tag and and inner html comment. When the placeholder becomes visible in the viewport, it is replaced with the html string inside the comment.
You can use any tag for the placeholder but I like pre because it renders as 0 dimension when there's only a comment inside.
Hope this helps!
#MW_Collins
Here's two more JQuery plugins that do lazy loading / infinite scroll:
http://jscroll.com/
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/