move images away before refresh browser - javascript

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

Related

Loading screen using JavaScript changes nothing on a phone

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.

How can I change the source of an iframe when the user clicks on the browser back button?

Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?

Force an infinite scroll page to load several pages

There's a page that has infinite scroll and it loads the next page when you scroll to the bottom of the current page, like twitter and facebook.
I want to force the page to load several pages instead of just one every time I reach the bottom.
I see in chrome's console that something new pops up into the elements and then disappear almost immediately. I managed to capture some of that element before it disappeared: <iframe class="hidden_elem" name="transport_frame_9" src="/ajax/pagelet/...
, The number in transport_frame_9 increases on every load.
Also I tried to look in the <script> tags of the page for clues but couldn't find anything useful.
Is it even possible to invoke this script to load several pages? Or maybe there's a way to fool the page to think I reached the bottom several times? Like setting a some scrolledToBottom property to true?

Stay on Current page UNTIL the Next page has FULLY loaded

How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

Take action when an image on a webpage is loaded and seen by the user

I need to take an action (Call a WEB URL) when an image on a webpage is loaded and is seen by the user (image is not hidden in a scrollable area). If the user scrolls down, and the image gets displayed, then we take the same action.
Is this possible? Using AJAX and Javascript focus? Does focus differentiate between (a) images that are loaded and displayed on screen and (b) images that are loaded but not displayed (because they are still down the scrollable page).
Would really appreciate your help.
Thanks
You can hook into the onload event of the image and the onscroll event on the container.
Use math to see if the images offset is in the viewport (inside the onscroll) and check the images onload - when both criteria are met, you have arrived at your destination.
Look into the following properties: document.body.scrollTop, document.body.clientHeight and image.offsetTop.
Doing a quick calculation using those every time the page scrolls (window.onscroll) should let you know if the image is visible or not.
Maybe this answer could help you:
Get image size when it loads from an extern URL in Javascript

Categories