Loading screen using JavaScript changes nothing on a phone - javascript

I have a simple question.
I'm trying to get ride of the blank page when I load a html page with 2 videos in it.
I searched for some solutions and the most popular I've found seems to be this one (With some css).
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".TheDivClass").fadeOut("slow");;
});
</script>
But there is no noticeable difference when I load my website using my phone (on chrome or safari) and I was wondering why. It still loads in a blank page during at least 50 sec and then the loader icon shows up for 0.5 sec.
Should I put the link of the site to show what I mean?
It's a portfolio :)
https://velynns.netlify.com/
The Solution :
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$('#Video1').load('LoadVideo1.html');
$('#Video2').load('LoadVideo2.html');
$(".se-pre-con").fadeOut("slow");;
});
Where LoadVideo1 & LoadVideo2 contains the video tags.

Your videos must be causing delays on the loading of everything all together.
A better way to handle this situation might be to remove the videos all together from the website first, but keeping the empty div's to place the videos in after loading your page.
1 - Show the "page loading" animation
2 - After loading animation is showing, load the videos into the website
3 - Once the videos are loaded, then hide the page loading animation.
$(window).bind("load", function() {
$('#movie-div').load('movie.html');
});
Do something like this to load the video into the empty div after the page is loaded up.

Related

Carousel first issues in first load

i have a problem with carousel image banner slider. In first load my page is looks like this
Looks there are three consecutive images when i load page (those images should be banner slide). But after a moments (less than a second) three images are rendered in proper way. After a moment here is the view of web page
The problem is i want at first load web page i want a state looks like second image. Anyone know the problem ? i had just debugged via chrome debugger and nothing wrong with my javascript, could you give me any clue what is wrong with ?

How to create a loop in javascript (for use in Chrome -> Console)

I am viewing a webpage with a lazy load structure (similar to facebook's wall), such that when a user loads the page and scrolls down, more content is loaded if available.
I want to view this page in Chrome, and inject a script via the console to infinitely scroll down the page so I can get the last available entry.
This code works for 1 instance:
window.scrollTo(0,document.body.scrollHeight);
How can I make it scroll infinitely with 1.5 secs between scrolls?
If you want to repeat some lines of code over a set interval, then you should look at window.setInterval(). For your case you could do
var scrollInterval = window.setInterval(function () {
window.scrollTo(0,document.body.scrollHeight)
}, 1500);
Although that's probably not the best way to go about it because god help you if you do it on a page that has thousands of posts available like facebook. If ever you want to stop it you can enter into the console:
window.clearInterval(scrollInterval);

Simple preloader that loads all resources and caches them before showing site and running animations

I am trying to create a simple preloader that will request and preload all resources until everything is cached. Then the website should fade-in. The issue what I am having is that Im not sure if my code below is ok as im still a novice. Also what I cant manage to achieve is stop any css3 animation from firing before the preloader finishes. Forexample, I have alot of fade in and slide in effects when the websites is loaded. When the preloader runs it also somehow fires my animations in the background...hence when my site is loaded no animation is shown.
So I need to be able to
1) Preload all resources and cache them before the site is shown (meanwhile it shows a small gif)
2) When loading it should prevent animations from firing. When it is done the site shows and then starts to trigger all css3 animations. The animations are only fired once by the way which is why im concerned.
Here a JsFiddle. I hope that is ok as I am still new to this website and dont use it very often other than notepad ++ or dreamweaver:
http://jsfiddle.net/5w2JU/
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
Use jquery .addclass() if loading is complete.

move images away before refresh browser

In a html page I am making, I dynamically move images into the viewport using jQuery and Raphael's library. When I refresh the webpage, these images appears to be white block for <100ms before the webpage loads again. I want to move these images out of the viewport so these white blocks don't appear.
I used window.onbeforeuload=functio(){$('#myimge").css(...);} to move the image. But it turns out that the white blocks still appear because the browser doesn't have time to show a newly refreshed view with the images in the new location. If I put alert(), then the images will disappear. So I am looking a way to really move the images out of the browser window before the browser reloads the page.
You can't do that, you can't block window from closing, unless you hack it, but it's very bad practise i think
$(window).on('beforeunload', function() {
var start = +new Date;
while ((+new Date - start) < 3000);
});
For me i would go with ajax loaded pages, more like HTML5 pages

Make jquery lazyload plugin work inside the viewport

The lazyload jquery plugin delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
The problem is I have a thumbnail gallery with about 40 small images, 10 per line.
If I load the site, I can see 3 rows of images (30 images in total). The plugin does wonders with the other 10, but I still get 30 HTTP requests at once.
Can this plugin be modified to delay images in the viewport? maybe in groups?
Display the first 10, wait half a second, display the next 10, wait again and so on.
P.S. Lazyload has an option to delay loading all images until the DOM is ready, but if scripts like jquery or others load a bit slowish sometimes - I will see a site with no images.
Here is a link to the plugin source code.
If you manually add a class to each image in the row of 10 and a separate class to the images in the row after and so on, you can trigger a load of each row like so:
$(function() {
$("img").lazyload({
event : "timedload"
});
});
$(window).bind("load", function() {
setTimeout(function() { $("img.row1").trigger("timedload")}, 1000);
setTimeout(function() { $("img.row2").trigger("timedload")}, 2000);
setTimeout(function() { $("img.row3").trigger("timedload")}, 3000);
setTimeout(function() { $("img.row3").trigger("timedload")}, 4000);
});
If you are only worried about the request amount you can use Image Sprites to bundle your images.
For example you can bundle the first row in one sprite, the second in another and so on. This reduces your 40 requests to 4!
Of course this requires that
images are either static, so each user sees the same images or
some kind of server sided "Image Sprites" generator. However neither
Google nor Facebook are using a server sided "Image Sprites"
generator to bundle their images

Categories