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/
Related
I have a div section that includes hundreds of tables from my database.
The problem I am having is when the page loads it is really slow. So you wait a long time for it to load.
Can anyone assist me in showing how to load just the visible area in my div.
Note : I can't use Boostrap DataTable because my row does not contain a head and body like normal tables do.
Any assistance will be appreciated.
This is quite a neat solution. You can target specific elements via a class. So all you need to do is add the class appear to whatever you want to lazyload.
Appearlazy uses appear.js to lazy load images or divs that have an "appear" class. It works by switching a data-src attribute into the src as an image is identified as viewable.
http://creativelive.github.io/appear/examples/lazy/
There are however quite a few different solutions for lazy loading.
See available JS scripts here - https://plugins.jquery.com/tag/lazyload/
I think the most widely used one though is lazyload.js - https://plugins.jquery.com/lazyload/
Example
You can use this script for lazy loading a div.
https://github.com/emn178/jquery-lazyload-any
Add a class called my-lazyload (or whatever) to the div you want to lazyload.
HTML
<div id="my-lazyload">
<!--
<p>Your content here</p>
-->
</div>
In your jQuery code you select the class and call the lazyload function.
JavaScript
$`('#my-lazyload').lazyload(options);`
Hope it will help. You can view the explanation in more detail on the page
You will need to link to jQuery and Lazyload js files
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload-any.js"></script>
You will just link to your own CSS. No special CSS required for lazyload.
I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!
Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.
If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).
Currenly I'm trying to animate the component module for a website for a school project. The animation contains a fadeIn/fadeOut and a change of the content without loading a whole new website. After the animation it adds a hashtag to the URL (like #about-me). In Joomla there appears only my 404 Errorpage and the animation doesn't take effect. It works perfectly on the HTML-Only Version and in Typo3 but not in Joomla. Google shows no result to this question, only to special plugins and modules but not for the general modules. How can I use it the right way? You can watch the side under:HTML: http://www.aks-schulinfo.de/gtm3_big/24h/essmannExample of errored jQuery: http://www.aks-schulinfo.de/gtm3_big/24h/essmann/js/dynamicpage.jsThanks for your help.
Okay, you'd like to change the page's content without reloading the page. One of the easiest ways to do this is to load all of the content on the page, and then hide everything that's unrelated. So, setgup your index.php page (or which ever is your main) with all of the content separated into their own divs.
<div id="contentHome"> .... </div>
<div id="contentAnmeldung"> .... </div>
<div id="contentRegelwerk"> .... </div>
<div id="contentSitempa"> .... </div>
Use javascript to find the current hash tag with location.hash, then switch the possibilities and show related content while hiding the other three. If you're really gung-ho, you can do the same with php as the page is being created so that people can link to specific "pages" still.
NOTE: This works well with limited content like the site currently has. Don't even try it if you have a lot of content because page load times will be horrendous.
The contentchange without reloading is now working fluently, thank you! The other half (the fades) are still not working. Why does the fadeeffect apply at the html-only view but not in at the Joomla site?
Links:
HTML-Only: www.aks-schulinfo.de/gtm3_big/24h/essmann/htmlonly
Joomla-version: www.aks-schulinfo.de/gtm3_big/24h/essmann/
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
I am developing for a pre existing PHP based system.
I am trying to load this bit of code
<div style="border:1px solid #000000;height:20px;">
<marquee>This is some scrolling text<br>more text<br>more text</marquee>
</div>
Problem is, for a split second, when a visitor loads the page he sees the entire <marquee> content, and only after a second the parent div loads and fits the <marquee> into the bordered div.
How can I avoid this?
Note: I cannot use jQuery as it conflicts with many other loaded js files that are loaded to that page (even when using jQuery.noconflict()).
A q&d solution for these kinds of cases - I'm not saying it's the best for yours, or especially elegant - is to declare the marquee with visibility:hidden and unhide it by script at the end of the page, or at the end of whatever onload codd you have. And if it still unhides too soon, envelop the unhiding code in a setTimeout(function(){ ... }). That will usually force the browser to do a layout before running the code.
Note: I cannot leave comments yet...
Can you try putting the style directly in the marquee?
<marquee style="border:1px solid;height:20px;">text</marquee>
and like the previous commenter said, marquee is not recommended to use (and it's really annoying most of the time)