I have a website, with few content. So, it loads fast in the navigator.
I want to load an jquery animation before show the first index.htm.
Sincerely I don't know how implement this idea. I don't want that the user clicks in the animation to continue to the main site. I want make an animation of 'x' time and when it finish, charges automatically the next html, or the rest of the page.
Thanks very much.
Change your page the way that it loads all content at once including the animation. But the main content is hidden (e.g. by inline CSS) and the animation block is shown. Once your animation is done hide the animation block and show main content instead. As simple as that. This also gives browser enough time to render main content while it plays your animation.
Or option 2 - load index.html with animation only and then load content via AJAX while animation is playing into hidden element.
I would provide an example code if i had laptop or PC at hand, but basic sequence should obvious
And what about using frames / iframes? Have a simple page with jquery or any other animation and inside this page have a iframe. When iframe is loaded, hide a animation. When iframe is not loaded - show a animation.
I suppose that you want to display some ads in animation. So, then you can create condition - set min time of displaying.
Related
I am creating a website which hosts 360 panaramic photography. I am creating basically a slideshow of 360's using an iframe with tiled thumbnails. When the user clicks on a tile it loads that 360 into the iframe through JS by changing the src value of the iframe.
My issue is bandwidth, If I use the method of loading the src value into the iframe then every time this occurs, it seems to reload the content - looking at my network tab in my browser this does seem to be the case, I can see the image files being reloaded for a second time if the user re-views a tile/iframe.
My other option would be to have multiple iframes and just hide or show them based on which tile was clicked. Maybe using 'display:none'?
However would this then create the issue of multiple 360 panoramic photos running at the same time and being taxing on the users computer/ graphics card? Or would display:none then disengage the iframe from creating work for the graphics card?
Is there anyway to tell whether the iframe has been disengaged when hidden and is no longer taxing the users computer?
And if it is, then is there a way around this somehow? Can an iframe be disengaged so that it isn't running so to speak but it can still be made visible to the user again without reloading the content again.
Thanks, I hope this makes sense.
I think your problem can be solved using two things: Lazy Loading and Visibility.
You can achieve the lazy loading either the native way
<iframe src="your-360-image" loading="lazy"></iframe>
or using one of the libraries that does it for you, Iframely and lazyframe are good ones.
You can set the all the iframes to start loading in the background when the user is near them, so by the time the user clicks the tile, it's already loaded.
Regarding that the browser reloads the images, that might be because you set display to none, or even remove the element completely from the DOM. You might just want to hide it by setting the visibility to hidden, this should not re-load it again.
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
You can open the site in any section. For example this link opens the site in the fourth section:
http://alvarotrigo.com/fullPage/#4thpage
This means the site immediately starts to scroll once you opened the site (it scrolls down to the fourth section).
However, I have a script (it loads a chat box) that slows down this process. Although I added my chat script AFTER the Fullpage.js initialization script, my site first loads the chat box and after that Fullpage scrolls to the right section.
I want the page first to scroll down to the right section on site open, and once the site has opened and has scrolled to the right section, then the chat box script needs to start to run (for as long as the site is open).
How to accomplish that? I tried to place my chat script in the afterLoad and afterRender, but for some reason that makes my chat box not showing up at all. Is there a way to perform some actions after Fullpage has loaded and after the first scroll (on site open) to the right section?
As I said in a previous comment:
Probably what's taking time is the loading of the JS, CSS or SWF files required for that script to run. Fullpage.js waits until all elements from the site have loaded to scroll to the section. The reason to do this is due to the use of images in section when using scrollOverflow:true, as fullpage.js needs to determine if the section needs scroll bar or not depending on the size of the loaded image.
To solve it you can load the element dynamically by using jQuery or ajax.
Otherwise, you can edit fullPage.js and change line 536 this:
$window.on('load', function() {
scrollToAnchor();
});
To this:
scrollToAnchor();
The only problem with that is that you'll have to remember to change that line every time you update fullpage.js.
Feel free to open an issue in fullPage.js github forum and a solution might be implement in future versions.
I have a full-screen .gif animation that starts when the user accesses the home page and then fadeOut reviewing the page's content. The thing is, depending on the computer and its internet, there is a delay and sometimes the animation end up hiding before it has been fully viewed.
I am using the code below to hide the div that allocates the animation based on the duration it has (around 10s). I don't know if it is possible, but I would like to hide it after it as been fully played/load(not sure) and not after a specific amount of time.
$(".animation").delay(9500).fadeOut(400);
Try placing the code in a separate JS file (or update the current file and test it) and then...rather than using the $(document).ready, use the $(window).load
The window load event will execute after the page is fully loaded, including all the frames, objects, images, etc.
I have a pre-loader implemented into my site and when I load the site to activate the pre-loader there is a scroll bar on the side. This is because the website is scrolling in the background while my pre-loader and full-size background is in-front.
Is there any way I can make my pre-loader the main focus until it disappears then the scroll bar can appear for my main page?.
I am using HTML, CSS and JS for this loader.
From what I can tell, your preloader script seems to work by fixing an element over the entire page until the rest of the page has loaded.
In this case, adding style='overflow-y: hidden;' to the body would work.
Once your page loads, you will need to remove that style to allow the user to scroll and see the scrollbar again. It depends on the loader you are using. There should be a way to hook in javascript upon page load.
I used what you said and then just removed the Attr once the page loaded.