How to load images after the window is loaded? - javascript

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.

Related

How to load webpage faster if it has lengthy content and big images

I am trying to speed up my website which has too much content as well as multiple slider with high resolution images.
I studied many articles/blogs and applied like:
1) Host on a good server.
2) compressed images
3) sprite images for icon
4) compress js and css also attach css in header section and js at bottom etc.
same like from blogs. But my problem are by images.
Is there any plugin which can load page/images faster same like static site or any other solution.
You should try one of the libraries that lazy-load images. These libraries load images only when the page scrolls and the image comes into the view port.
example search: https://www.google.com/search?q=lazy+load+images
Use jQuery.Lazy to lazy load content only when the user reaches them by scrolling. Especially Images, but even iFrames, Videos, YouTube, and maybe some other content e.g. in Tabs or something via AJAX. It's simple HTML and JS. No big deal. ;)
For images it' simple, use data-src instead of src:
<img class="lazy" data-src="image.jpg" />
And then just call the Plugin:
$(function() {
$("img.lazy").Lazy();
});
You could even think about to use a low-res placeholder and load the high-res version whenever the user is viewing it. So the user don't have to wait for everything is loaded. You could even add some effects, to make it feel more dynamic. ;) This could even be done by Lazy.
<img class="lazy" src="lowres.jpg" data-src="highres.jpg" />
Good Luck!

How to load content in a "virtual window" like "LightBox"

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

How to display images only after html is properly rendered?

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

What gallery script is this?

I really need to know what flash photo gallery is used on this site?
http://www.shad0w.ru/impression.html
Also do you know any similar javascript script?
the gallery is:
http://www.simpleviewer.net/simpleviewer/
there are plenty of JavaScript photo galleries available -
one i like is http://devkick.com/lab/galleria/demo_01.htm
hope that helps.

jQuery Infinite Scrolling/Lazy Loading

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/

Categories

Resources