Why Is My Lazy Loading Page Not Loading Correctly? - javascript

I need help in determining why my page using a Lazy Loading jQuery library isn't working correctly. One element or calendar renders correctly, but the other doesn't. I'm enclosing my div content within the <div class='lazyload'> class as specified:
...
<div class='main regularslider owac'>
<div class='lazyload'>
<script type='text/lazyload'>
...
</script>
</div>
...
Note that the JavaScript wasn't produced by me.
I'm using this plugin as inspiration (most of the PHP and all of the JavaScript is identical to what I have): https://wordpress.org/plugins/availability-calendar/
Here is my sample web page: https://applicable-owl.jurassic.ninja/apartments/
I expect to see both calendars with clickable buttons on both sides of the calendar, but one calendar always seems to output the entire collection of divs in a linear succession without having any associated JavaScript with it to render the buttons.
Please also note this is a WordPress site and using two shortcodes to render the calendar content, with one shortcode followed by another.
So I have this with the shortcodes:
[availabilitycalendar apartment="2" language="EN"]
[availabilitycalendar apartment="2" language="EN"]
I'm attempting to increase the speed of the page because without lazy loading, the page has to wait for all the divs to be created.
A link to the relevant PHP responsible for this: https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/includes/frontend.php#L104
And for the JavaScript (it appears to be using Slick as inspiration) : https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/js/owac.js

Related

How to lazy load for a div section with ajax or java

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.

jQuery dynamic page loading - Other javascript is broken and how should i import page specific js?

Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k

How to make more than two jQuery scripts work in a single webpage

-Test link for the problematic webpage-
This webpage is a landing page to a parent website. There are several javascripts that are required to run. Unfortunately, not all work simultaneously. I have tried various combinations but cannot find a way to make the webpage work.
The functions taking place in the webpage are:
Revolutionary Slider
Multiplication calculator
tabs toggler
smooth scroll-to-section menu
back-to-top button
Fancybox (lightbox)
Please help . Thankyou
Errors generated by your page
indicate that jQuery library is not the first script you are loading.
Looking into source show that you are loading jQuery in line 75.
Move this line to very top of your page.
I think this is your primary problem. Your scripts may not necessarily require different jQuery versions.

Website: Same universal menu on different pages

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

Javascript ends in Errorpage in Joomla

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/

Categories

Resources