I've coded a fancy preloader with jQuery for my project. While my AJAX query is processed it is activated.
I have used to load it:
$(document).ajaxStart(function) () {
#preloder is displayed
}
And to stop it:
$(document).ajaxStart(function) () {
#preloder is turned off
}
Problem is my AJAX returns images src that are then diplayed in a <div> but some of the pictures are really heavy and most of the time my preloader stops before my pictures are completely loaded.
I went through jquery documentation and found a .load(function). But it seems that it has been removed from jQuery. It seems that it has been replaced by .trigger("load"). Can it be useful for my problem? I tried to implement it but with no sucess.
Quick answer from #Aureliano Far Suau that worked beautifully for me. No plugin needed:
$('img').on('load', function() {
// do something
});
For multiple images:
var loaded = 0;
$('img').on('load', function() {
loaded++;
if(loaded == $('img').length){
// do something
}
});
Related
We are using the Easy Video Player in on a WordPress website in combination with FacetWP. This is software we use to filter. This filter is working with AJAX and there is no page refresh after an interaction with the filter, it is done with AJAX.
This is causing problems with the Video player we are using. We think some Javascript is not loaded because of the AJAX refresh with the filter.
We allready know this from FacetWP in order to reinitialize Javascript after interaction with the filter:
facetwp-loaded Event
We also found the PHP script that enqueue the CSS and JS files.
function easy_video_player_enqueue_scripts() {
if (!is_admin()) {
$plugin_url = plugins_url('', __FILE__);
$enable_jquery = get_option('evp_enable_jquery');
if ($enable_jquery) {
wp_enqueue_script('jquery');
}
//wp_register_style('plyr-css', 'https://cdn.plyr.io/3.6.7/plyr.css');
wp_register_style('plyr-css', $plugin_url . '/lib/plyr.css');
wp_enqueue_style('plyr-css');
//wp_register_script('plyr-js', 'https://cdn.plyr.io/3.6.7/plyr.js');
wp_register_script('plyr-js', $plugin_url . '/lib/plyr.js');
wp_enqueue_script('plyr-js');
}
}
But to be very honest, I can't figure out what I have to load in the FacetWP function in order to re-run the JS to get the player working with filtering.
Anyone can help me a step furder in order to fix this?
EDIT
Got it to work with the help of John:)
const player = Plyr.setup('video', { ratio: '16:9', });
Complete code looks like this:
<script>
document.addEventListener('facetwp-loaded', function() {
const player = Plyr.setup('video', { ratio: '16:9', });
});
</script>
It´s just a wild guess by looking into the videoplayersource and combine with the facetwp-loaded event.
maybe it works when you add this handler to the bottom of your page (not the content loaded with ajax):
document.addEventListener('facetwp-loaded', function() {
const players = Plyr.setup('video');
});
if you are getting $ is not defined, try replace $ with jQuery
PS: i just realize that your version of easy-video-player differs from the link i posted above, maybe you should upgrade it to the latest version so it uses flowplayer like in this answer
I'm trying to get a loading page for my site up and running, although its not loading actually it just waits at least 5 seconds before it disappears.
Everything works fine except that I want the given ID that disappears do so with an animation. (For example swiping up out of the screen)
Im still very new to jQuery and Javascript, and Im trying to learn with this along the way.
I tried various methods I know but none of them actually worked with the code i have already. It either doesnt run at all or just doesnt show any kind of animation
As said above: I tried various fade in and outs just to see where the problem is but no animation actually works. Just trying to figuire out what im doing wrong so I can learn from it.
heres some code:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 5000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true).fadeIn(6000);
show('loading', false).fadeOut(6000);
});
Ive tried adding servaeral animations but they either dont show or the whole code starts breaking.
As mentioned I am new to jQuery and Javascript so Im trying to learn. Please give me something I can learn with along the way.
I tried various fade in and outs just to see where the problem is but no animation actually works.
The provided code seems to be a mix of JavaScript and jQuery techniques which are not quite lining up. As your primary objective is animation and you are learning, I suggest use only jQuery at first.
Here is a snippet that performs the animation using jQuery which you should recognize by the use of the jQuery alias $.
It uses the jQuery ready event to make sure the page loads first
It uses the jQuery delay function to wait 5 seconds
It uses the jQuery fadeIn and fadeOut functions for the animation
$(document).ready(function() {
$(".loading").delay(5000).fadeOut();
$(".page").delay(5000).fadeIn();
});
.loading {
position: absolute;
}
.page {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading">Loading...</div>
<div class="page">Welcome</div>
I'm currently using a 3rd party jquery plugin which when called from a page, pops up with an overlay, and some forms that are not part of my site.
I've been trying (with no joy so far) to be able to detect from my own sites jquery, when this overlay is closed. I'd like to simply jump to a certain part of the page.
I've tried writing jquery to listen for the final button of the 3rd party form being closed, by checking for it's class name being removed, with .remove .destroy and checking for it's existing with .length and some other methods. however, it seems that my on page jquery can't see anything about these elements at all, and therefor I can't do something fun when that dialogue ends.
Anyone got any ideas of how this could be achieved? Am I missing something obvious?
Cheers in advance!
I was able to get this working via the below javascript. Maybe there is a better way, but this seems to be working well
<script>
var bookingInterval;
$("#ViewingButton").click(function () {
setTimeout(function () {
bookingInterval = setInterval(function () {
if ($(".agent-ui-modal")[0]) {
// Do nothing if class exists
} else {
// Do something if class does not exist
window.location = ("#calculator");
stop();
}
}, 500);
}, 5000);
});
function stop() {
clearInterval(bookingInterval);
}
</script>
I would like to preload everything before HTML even starts displaying.
The problem is with loading external fonts, images etc.
I was trying to make simple jquery function with:
CSS:
html { display:none; }
jQuery:
$(window).load(function() {
$('html').css('display', 'block');
});
But that doesn't really work.
The main reason that I want to preload is that I have font animation on the page start and when the font isn't loaded and CSS animation is fired it looks a little buggy.
load() as a shortcut for on('load') is deprecated:
Try using
$(window).on('load', function() {
$('html').css('display', 'block');
});
$(window).load(...
waits for EVERYTHING on in the window to load. Which is great. But recently I have very much desired for an event to fire at a specific point in the page's load. For example, 'everything BUT images'.
I wish I could list my failed attempts, but I don't know where to begin or even if such a thing is possible.
Something like:
$(window).partialLoad({
exclude : 'jpg, png, gif'
}, function(){
//do something when page has fully loaded except for images
});
or conversely
$(window).partailLoad({
waitFor : 'woff, eot'
}, function(){
//do something after all woff and eot files have loaded
});
If its possible I will write a nice plugin to handle it. Can anyone point me in the right direction as to how I might accomplish this?
Making the assumption that $(window).load() waits for all linked resources to download, we could write your own, assuming that without images, that would be iframe[src], script[src], link[rel="stylesheet"] etc.
var items = $('iframe[src], link[rel="stylesheet"], script[src]'),
itemsLength = items.length;
items.load(function() {
--itemsLength;
if ( ! itemsLength) {
// All loaded!
}
});