Prioritizing window.load functions - javascript

Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.
I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.
I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.
Here's my working code:
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
});
jQuery(window).load(function() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
});
Regards,
Johann

You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:
jQuery(window).load(function() {
//set up the preloader
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
//Remove the preloader
jQuery('#wptime-plugin-preloader').remove();
//Set up the slider after removing the preloader
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
});

Activate the preloader on window.onload and call the slideshow function from inside the preload function (Note: Untested!):
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
slideshow();
});
function slideshow() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}

Put your the code that loads the slideshow inside
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
//slideshow code here
}
$(window).load would wait for the page to load all the elements, which you do need for your javascript to work, because you have to make sure the elements you are referencing in your code already exist in the DOM. To chain functions call each next function from the last block of the one preceeding

Related

Lazyload cutting off image height when dynamic height is turned on

When I enable Lazyload on my image slideshow with the dynamic height enabled, it cuts off and only shows a fraction of the photo height, I have attached a screenshot, if the initial load you can view the images perfectly, please use the toggle arrows and you will be able to see what I mean.
I have been trying various fixes to no avail and as this was a html theme I purchased, unfortunately, the theme author has also not been able to help me, your help will be much appreciated.
The JS I have in my custom script file is:
$(".property-carousel").owlCarousel({
rtl: _rtl, items: 1, lazyLoad : true,
responsiveBaseWidth: ".property-slide", dots: false,
autoHeight: true, nav: true, navText: ["", ""], loop: true
});
I also had this problem, "lazyLoad" combined with "autoHeight" cut off some images because the lazy-loaded images' heights weren't taken into account by the owl carousel. For me, this works (modification of the answer from #baduga):
var myCarousel = $(".property-carousel").owlCarousel({
lazyLoad : true,
autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
myCarousel.trigger('refresh.owl.carousel');
});
try to add auto height on function
owlCarousel({
items: 1,
loop: true,
autoHeight: true
});
set auto height true
autoHeight: true
You need to set lazyload true in OwlCarousel:
lazyLoad: true
Go to the documentation for more.
Here's my solution of the problem:
gallery.owlCarousel({
margin:5,
loop:false,
autoHeight:true,
items:1,
nav: false,
dots: false,
lazyLoad:true
});
gallery.on('loaded.owl.lazy', function(event) {
$(this).find('.owl-item.active img').one('load', function () {
gallery.trigger('refresh.owl.carousel');
});
});

Code is running with console tool in browser but not from itself?

I got this code for my js file:
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
I saved it and when my site is loading it's correctly showing up in the head tag. However nothing happens. When I open the console of the browser developer tool and paste the code there, then it's working correctly. What can cause this and how can I fix this?
That's because this is never called. Put this in window.onload(which will execute this function when page loads)
window.onload = function() {
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
};
Or if you are using jquery. This will also work.
$(document).ready(function() {
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
});

JWPlayer load() and playAd() not starting using onBeforeStart()

I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)

Rails turbolinks - window.load not document.load

I have such code in one .js file:
var ready;
ready = function() {
var galleries = $('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
}});
};
$(document).ready(ready);
$(document).on('page:load', ready);
but in my rails 4 app i use turbolinks, and sometimes is so,that images are not loaded, but document is ready and i can't start ('.car-gallery').adGallery
maybe there are any ways to don't reload page, and use window.load with turbolinks? and how?
Apart from JQueryTurbolinks, as shown in the comments, it seems your JQuery is not binding to the page load events as it should
I would recommend this code (if you want to keep a native solution):
var galleries = function() {
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
};
$(document).on('page:load ready', galleries);
Can you try adding this:
var alert = function(){
alert("loaded");
};
$(document).on("page:load ready", alert);
Update
After a conversation, we found this was the solution which worked best:
#JS
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
#view
<%= link_to "link", path, data: { no-turbolink: true } %>

AnythingSlider Fx Transition Flicker

On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to only occur on the first rotation of slides & goes away after the first repeat.
Demo Page: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html
Any ideas? I haven't been able to figure it out so far.
Thanks in advance!
Try changing your mode to fade (demo):
$(function () {
$('#slider').anythingSlider({
mode: 'fade',
autoPlay: true,
delay: 2000,
pauseOnHover: false,
buildStartStop: false,
buildArrows: false
}).anythingSliderFx({
'.left .content-wrapper': ['left']
}, {
timeIn: 300,
timeOut: 350,
stopRepeat: true
});
});

Categories