I need a javascript code which loads an image into browser cache. What is the usage? read this:
When the user logs into my site, she/he gets redirected to a page which is "Redirecting you to control panel" and a progress is displayed there too. Now, this "redirector" page has a background, since user experience this page and sees it only 3 seconds, many times, background image is missed and there remains no chance for it to be loaded, since from the page load till the page redirection there is only 3 seconds gap. Here is en example of my ajax login:
$.ajax({
// do ajax stuff
success : function(msg)
{
if(msg==true)
{
// I NEED A FUNCTION HERE TO LOAD THEM IMAGE INTO CACHE BEFORE THIS PAGE
// TO LOAD THE REDIRECTOR PAGE. USING THIS, I CAN ENSURE THE EXISTENCE OF THE
// BG IMAGE WHEN THE USER SEES NEXT PAGE. THIS BG IMAGE IS INDEED NEXT PAGE'S BG
window.locatio.href = 'process/redirection/to/user-panel';
}
}
});
This function will work:
function preloadImage(url)
{
var img = new Image();
img.src = "/test/example.jpg";
}
Also, here is a question that discusses something similar, pre-loading images on a splash screen, but the implementation is far more complex.
On the subject, if you don't have to use JavaScript, another solution using CSS and XHTML that could probably work on the redirect page can be found here. Otherwise, the code at the top should work. Hope this helps, good luck.
Related
I have a small digital signage web application where all the pages shown is created in HTML and stored in a database.
I need to make some sort of player that will display all my slides. I have a URL to call that gives me the next page to show: http://example.com/PlayNext This will return the next slide in the given context.
Right now i just have a timeout that will reload the page every 10 seconds. I want to make a much more smooth experience with the player, and load everything from client, without postbacks to server.
So what im thinking is to load the next page in an off screen tag and when thats loaded, slid it into view, and then start loading the next slide off screen. When the show duration has passed, then slide the next page into view and start loading the next one, etc.....
What im wondering is how actually to do this off screen loading thing. I know i can set overflow to be hidden and just place it 3000 px off screen. But how do i make the continuous flow that will allow me to show all the pages i want ?
And a side note - how do i clean up the divs when they no longer should be in use? so that my browser isnt leaking memory?
edit
This is the current "player", it is ASP.NET Razor syntax to show the next page url etc. this is what i want changed to load it in an off screen div:
<script type="text/javascript">
var duration = #ViewBag.Duration;
var nextPage = "#ViewBag.Address";
window.setTimeout(reloadbrowser, duration);
function reloadbrowser()
{
var path = $.ajax({
url: "/page/Ping",
success: success,
error: reloadbrowser,
timeout:5000
});
}
function success()
{
window.location.href = nextPage;
}
</script>
</head>
<body style="height:100%">#Html.Raw(ViewBag.BodyXHTML)</body>
</html>
if the url http://example.com/PlayNext is a url which retrieves the html from the database then these are the steps you should take:
1. you need to get the html from the database using ajax()
2. load that html inside an iframe
3. position that iframe outside of viewport (position:absolute; left:-100%;)
4. after the iframe is loaded, slide it inside the viewport and the old one outside and then remove() the old one
so you'd come up with something like this:
$(function(){
function getData(){
clearTimeout(window.theInterval);
$.ajax({
url: "http://example.com/PlayNext",
type: "POST",
timeout:5000,
success : function (databack) {
var iframe=$('<iframe>'+databack+'<iframe/>', {
style:'position:absolute; left:-100%;',
load:function(){
var that=this;
$(this).animate({
left:0
},500);
$('iframe').not(this).animate({
left:'-100%'
},500,function(){
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
window.theInterval=setTimeout(function(){
getData();
},10000);
},
error:function(jqXHR, status, message){
getData();
}
});
}
getData();
});
NOTE: you must build on this answer to match your project
why use an iframe and not a div
I'm gonna quote some benefits of using an iframe for loading websites inside another one from this answer
1) Iframes implement the cross domain origin policy (images, scripts, and styles do not). This can be useful for pulling in sites / content from other domain names relatively safely. Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do).
and the next thing is:
2) You can send multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well).
My goal is to start preloading all of the website images for a large photo gallery website on the front page (index.php) without it being perceived by the user. If the user clicks into the site (home.php) before all the images are loaded, which will definitely happen, the preloading process should continue invisible to the user. And if the user clicks to other pages (portfolio.php, etc.) the preloading process again continues. The idea is that hopefully with each new page, the process will not completely re-start because many images will already be cached, and the user will not have to wait while all the images preload.
Currently I am loading all of the images with html img elements that are inside a div with style="display:none". The img elements are delay-loaded with Javascript (LazyLoad technique) so that the page loads first without waiting on the img.
Is there a better way to do this?
<?php
foreach ($imageArray as $image) {
//code to find $fullImagePath.......
echo "<div><img u=\"image\" src=\" \" data-src=\"$fullImagePath\" height=\"100\"; width=\"100\"; class=\"lazy\" /></div>";
} // end of loop
?>
<script type="text/javascript">
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").each(function(){
$(this).attr('src', $(this).attr('data-src'));
})
}, 500);
});
</script>
While you're right in triggering it from setTimeout after the window onload event, I'm not convinced that this is adding a lot of value.
Unless you are using localstorage (and even if you are) cache size is very limited on a mobile device (and bandwidth usage=powerusage).
I would see if its possible to pre-fetch the images (and other content?) from the pages the user can navigate to from the current page (e.g. loading them in hidde iframes?)
I need to trigger a piece of code after every single bits are done downloading. The script works if injected after everything is loaded, but how do I trigger that automaticly?
My script is:
var divId = "jwplayer-0_wrapper";
if ($('#' + divId).length == 1) {
myReg = /https?:\/\/www\.youtube\.com\/watch\?v=[^"]+/;
var plainText = $('#' + divId).parent().children('script').text();
var url = plainText.match(myReg);
if (url !== null) {
window.location = url;
};
};
It is used to skip certain site that decide to use the JW player witch I find horribly buggy. So it looks for a div with the indication of the JW player and if there's one, it finds the link to the original youtube video and directly goes there.
Its triggered By Google Chrome Add-on named Javascript Injector and I apply the script on every page I visit. The plug in work perfectly well on sites like www.ayoye.co and www.veuxturire.com. But on other sites, that uses the same pathern, it seems that the script is triggerd too early. For example there www.mondedestars.com and www.lesautos.ca triggers it too early.
If I use the "inject now" fonction of the Add on after the page is really done loading, then it redirects me to the youtube page as expected. I am lost on the why it works some where and not were else.
I'm not trying to understand every single website here, I'd prefer make it dynamicly triggered after the page has done loading everything from its php, ajax, script, flash, html and CSS.
I've tryed to look to the JWplayer API, but since its terribly unclear to me, over the fact that its partialy in flash, it woudl be simpler if there was a way to trigger it after, or maybe just triggering it after i hover over the body, since every sites has a body. It cant be specific to one page.
Use something like this
var timer;
function injectYouTube() {
// DO YOUR STUFF HERE
// ONCE DONE CALL clearInterval(timer);
clearInterval(timer);
}
timer = setInterval(injectYouTube, 2000);
I am not saying this will be called after everything is loaded but instead you can make sure your code is executed when you want it to.
The JWPlayer API are not that difficult. You can retrive the informations you need even not knowing the container id.
This is an example:
var player = jwplayer(0); // get the first jwplayer element of the page
var video = player.getPlaylistItem(); // get the player video
var url = video.file // retrieve the video url
I think the setTimeout or setInterval are unreliable.
Setting up a listener on jwplayer onReady event would be better.
The pessimistic answer to this is that you can't wait until a page has finished all AJAX operations etc. because web pages can continue loading new content indefinitely if they wish.
What you might consider is running your code every time a new HTML element is added to the page. This way, you can be certain to catch JWPlayer the moment it is inserted into the page.
document.addEventListener("DOMNodeInserted", yourRemovalFunction);
I am developing a website (jQuery + Ajax) and I stumbled on a problem. When a page loads dynamically (for the first time, images aren't cached yet), it doesn't display the images. When I recall the ajax load function, suddenly my pictures are there.
$("#overlayInner").load(source+" #loader",function() {
$('#workImgs').nivoSlider();
});
I call nivoSlider on my dynamic page outside my loader div, so people who arrive directly on this page, can see the images as well.
<script type="text/javascript">
$(function(){
$('#workImgs').nivoSlider();
});
</script>
When you try to load the page without Ajax, the images load like they should.
Any ideas?
It is hard to make experiments in your website :) but you can try to add to each loading page (4d.html, dokerpoot.html and vuylsteke.html) the code for image preloading (in the start of the body tag). I used example images from vuylsteke.html:
<script type="text/javascript">
var images = [
'images/work/kapsalon2.jpg',
'images/work/kapsalon3.jpg',
'images/work/kapsalon4.jpg'
];
$(images).each(function() {
$('<img/>')[0].src = this;
});
</script>
Since the fragment load function after get parses the returned document to find the element with an ID of container, the idea is to let it first to load these images into memory, and then start to parse the document, and finally initialize Nivoslider. Possibly it will help.
I had this issue with content being loaded from a database. It turns out it was being caused by the Images not having a width or height set. This means that the plugin didn't know the size of the images and didn't show them but the browser calc'd these properties after the re-load so it showed the second time around.
Setting a width and height resolved this.
On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.
$("#my_button").click(function(){
$("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />");
});
I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with display:none set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?
This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.
Thanks,
Kevin
Yes. Just define it as a new image in the ready() call of the page:
$(document).ready( function() {
var preload = new Image();
preload.src = "http://mysite.com/image.jpg";
});
Then when you use it, it will already be in the browser's cache. You can use the variable or just reference it the same way you already are.
You could preload each image...
$(document).ready(function() {
(new Image()).src = '/path/to/myImage.jpg';
});