Javascript Loading Order – Prevent Page Jumpiness - javascript

See how this page loads its content for a while, then triggers the javascript after some delay? http://nomoresnoring.com/new/
How can I make things load more smoothly? Should anything be reordered?
Header:
<head>
<script src="_/js/modernizr.custom.min.js"></script><!-- modernizr -->
<script src="//code.jquery.com/jquery-latest.min.js"></script><!-- jquery -->
<script src="_/js/jquery.leanModal.min.js"></script><!-- leanModal -->
<script src="_/js/jquery.sticky.min.js"></script><!-- sticky -->
<script src="_/js/jquery.customSelect.min.js"></script><!-- customSelect -->
<script src="_/js/jquery.scrollUp.min.js"></script><!-- scrollUp -->
<script src="_/js/happy.js"></script><!-- happy.js -->
<script src="_/js/happy.methods.js"></script><!-- happy.js -->
<!-- some other things -->
<script src="_/js/rhinoslider-1.05.min.js"></script><!-- rhinoslider -->
</head>
Footer:
<script type="text/javascript" src="_/js/functions.js"></script><!-- all custom functions -->
<script src="_/js/rhinoslider-1.05.min.js"></script><!-- for Rhinoslider -->
<script src="_/js/mousewheel.js"></script><!-- for Rhinoslider -->
<script src="_/js/easing.js"></script><!-- for Rhinoslider -->
</body>
</html>

You can do:
//just before closing head tag
<style>body{display:none}</style>
</head>
//just before closing body tag
window.onload = function(){
$('body').fadeIn();
};
</body>
You could use a preloader animation too.

Related

Owl Carousel missing some styles when the page loads

I am using owl carousel as a slider but sometimes when the page loads the slider is not displayed. Inspect element tells me that the slider it's missing some styles. I have included the styles in the head of my page. I included jquery and then the owl carousel link. I am getting the data for the carousel with AJAX.
This is the code
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
</body>
No style is missing on the code you shared, the problem lies somewhere else
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
<div id="testimonial-slider">
<div> Slide 1</div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
</body>

DataTables does not display filter button

I have a problem, and that is that it does not show me the filter btn, I already produced the links, and I do not understand what the problem is, I will upload the links of whatever you call them, maybe there is some kind of error in the call, in advance, thank you very much! :
Head :
<!--Styles Css main -->
<link rel="stylesheet" href="../../css/main.css">
<!--Styles btns Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<!--Boostrap Datatables Css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap5.min.css">
<!--Favicon -->
<link rel="shortcut icon" href="../../assets/img/favicon.png" type="image/x-icon">
Scripts :
<!--====== Scripts -->
<!--Jquery -->
<script src="../../js/jquery-3.1.1.min.js"></script>
<!--SweetAlert2 -->
<script src="../../js/sweetalert2.min.js"></script>
<!--Boostrap js -->
<script src="../../js/bootstrap.min.js"></script>
<!--Jquery ScrollBar -->
<script src="../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<!--Main js -->
<script src="../../js/main.js"></script>
<!-- Boostrap Bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- datatables with bootstrap JS -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap5.min.js"></script>
<!--DataTables btns -->
<script type="text/javascript" src="../../datatables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="../../datatables/pdfmake-0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="../../datatables/pdfmake-0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/buttons.print.min.js"></script>
<!-- Styles in Excel -->
<script src="https://cdn.jsdelivr.net/npm/datatables-buttons-excel-styles#1.1.1/js/buttons.html5.styles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables-buttons-excel-styles#1.1.1/js/buttons.html5.styles.templates.min.js"></script>

Can't get JQuery plugin Slick (carousel) to work

Here is my HTML header:
<!-- Bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Jquery slick plugin -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<!-- My CSS -->
<link href="css/styles.css" rel="stylesheet">
Here is part of my body where I'm trying to display the carousel also where my javascript stuff is loaded:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="carousel">
<div><img src="img/slide-1.jpg"></div>
<div><img src="img/slide-2.jpg"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--Jquery Slick plugin -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"</script>
<!-- My JavaScript -->
<script src="js/scripts.js"></script>
<!-- My JQuery -->
<script src="js/jquery.js"></script>
And finally my jquery file:
$(document).ready(function(){
$('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1
});
});
Been trying to figure this out for a while now so any help is much appreciated.
one small miss is there in the code, the bootstarp.min.js will require jquery.
You need to include jquery before boot strap.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is the plunker based on you
https://plnkr.co/edit/3NXz9Q69M3IxbTONg6n2?p=preview
Here is a fiddle that seems be working
https://jsfiddle.net/0p4fjskc/
You should include jquery fist !
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Polymer website takes 5 seconds to load

My little Polymer 1.0 Starter Kit app takes 5 seconds to load. The site also uses Page.js.
I am following this tutorial on how to speed up your polymer app. But I'm on the video section.
I've used loadCSS in my app and the set up:
<head>
<script src="scripts/loadCSS.js"></script>
<script src="scripts/onloadCSS.js"></script>
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
</head>
<body>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-header-panel main mode="waterfall">
<paper-toolbar>
//web links etc
</paper-toolbar>
// Main Content
<div class="content" style="display:none">
<script>
onloadCSS(loadCSS('styles/main.css'), function() {
document.querySelector('.content')
.style.display = ''; // should show the content after css is loaded?
});
</script>
<noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
<noscript><link rel="stylesheet" href="/styles/skeleton.css"></noscript>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
// all the elements ie: <my-app></my-app>
</iron-papes>
</div>
</paper-header-panel>
</template>
</body>
Only the <paper-toolbar> loads and nothing else. Why .style.display = ''; does not work?
Thanks

fancybox and jquery overlapping

I'm using this basic template with a slider in the home but when I add a simple fancybox script for a single image, the fancybox doesn't work.
What of these js is overlapping fancybox?
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mp-slider').cycle({
pager: '#mp-pags',
timeout:7000,
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(index, slide) {
var titles = []
titles[0] = $("#mp-pags-cont li:eq(0)").text()
titles[1] = $("#mp-pags-cont li:eq(1)").text()
titles[2] = $("#mp-pags-cont li:eq(2)").text()
return '<li>'+(titles[index])+'</li>';
};
$(document).ready(function() {
$(".fancybox").fancybox();
});
});
</script>
Best way to find out with something like this is to comment out one script at a time until you find the one causing the issue. Then you can look more closely at that script and figure out where the conflict is.
pagerAnchorBuilder: pagerFactory
may be problematic. don't you want to call:
pagerAnchorBuilder: pagerFactory(a,b)
with parameters?

Categories