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?)
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).
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.
I have index.php and images.php. And what I want is that a certain div on index.php is getting it's content from images.php automatically and refresh when new content is present on images.php. I currently have this:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#images').load('images.php');
}, 500);
});
This works fine, but it refreshes the div every .5s which I don't want, I want it to detect when new content has been inserted into images.php then load it in.
But the thing is, on images.php I have some timestamps (1 minute ago, etc.). And jQuery will detect those as changes and will then refresh.
Is there a way to count the number of image tags (<img>) on the images.php page and compare them with the number of image tags in the div on the index.php page, and then if they are not equal, refresh the div on index.php.
The short answer is - no.
You should understand, that there's server side of your code and client side. Whenever browser sends a request, it gets a formatted html page (not a php script to execute) and gets all embedded resources (images, css, js files etc).
After that no communication is done between the client (browser) and a server (your web server). For you to get updated 'images.php' page you'd need to send a notification from a server to all browsers looking at your page currently (which you don't know - you'd need a fixed connection with them, but html protocol is stateless meaning there's no easy way of accomplishing it).
So, the easiest way is to have browser ping server in a timely fashion - every n seconds. Though, it would probably be better to fetch not all images every n seconds, but the last change date - and have some logic to fetch new data when it has a newer change date - this would reduce amount of traffic sent by your application.
var imageWrapper = $('#images'),
imageCount = $imageWrapper.find('img').length;
setInterval(function() {
$.get('images.php', function (html) {
html = $(html);
if ( html.find('img').length > imageCount ) {
$imageWrapper.html( html );
}
});
}, 500);
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';
});