I want to create a full-screen timeline web application that would scroll left and right horizontally, revealing some html-and-css-formatted text possibly with added images, videos and / or audio files.
The timeline should start at its rightmost position ("today's date"), offering a scroller that would allow user to scroll left to see earlier events, and to scroll back towards the right to see somewhat later events, all the way back to its rightmost position (the already mentioned "today's date").
There's a lot of data to load into the timeline (150+ years worth of events, about 200 pages of text alone) – which makes me think that if I dump all of it into a horizontally formatted, scrollable html page, it may result in a super-heavy page that would take forever to load, may be hard to scroll in some (most?) browsers, and may even crash the browsers. (I may be mistaken, though. Please see my Question # 1.)
So I'm considering the solution when the needed data loads into the page when the page is scrolled "close" to it (on the left or on the right), and unloads again when the page scrolls far enough away from it.
Not being a web programming "guru", I'm a little baffled by the task, and would appreciate a bit of advice.
My questions:
Am I wrong in supposing that all the data should not be loaded into the horizontal page right away? Maybe it's okay to do so?
What would be the more browser-friendly way to handle the overall process: a) spend a few seconds preloading all the data for the entire timeline from the database, and then echo the pieces of that data into a div when they are needed? - or b) only load the pieces of data from the database when they are needed?
How can that pre-loading/printing or loading be actually accomplished with PHP/HTML?
Maybe someone knows an open source or commercial horizontal timeline that already does what I'm describing?
Thank you in advance!
It is up to your case. But I think that idea is great (I just think your timeline look like a gallery, an album,..).
My answer is both a and b . I will load the pieces of data from the database when they are needed(but I will load these data when the page is scrolled "close" to it )
Ex: I'm in 2013 , I will spend a few seconds to load 2011, and 2012 (or last 100 items)
I think that We can load data through ajax.
I really don't know, but I think that you can custom/inherit something from the framework, which was introduced in Raad's Answer.
-5. You can create your own timeline. Maybe You will spend so many hours to do this.
How can we create this timeline?. You can search with keyword : infinite scroller.
I'm not sure if this fits all your needs, but it looks like it might be close - try http://timeline.verite.co/
Related
I don't have code for this question. However I've been searching around trying to find a way to detect how many screens a visitor currently has. What I am trying to achieve is a JS or jQuery slideshow between 2 monitors. I am thinking the best way to go about doing this is to first find out how many screens, and the screens size.
I also thought of making a huge div that would spread across 2 screens but that won't work, I think.
Sorry I am not providing any code, but I was looking around and couldn't find anything on that on the net.
Thanks in advance.
Using JavaScript you only can get browser's window size, at least the user have the browser's window filling all the virtual desktop, you can "detect" the amount of screens. With "detect" I mean you can calculate using most common screen sizes statistics and some probability, is not completely impossible if you know all your users.
You will not be able to detect the amount of monitors. You may only guess it according to the screen width.
Provide liquid design and let your visitor decide about the window width.
I don't even really know where to start, because I have looked everywhere and can't find a darn thing. Would really appreciate any direction you can supply on this matter.
So:
What I am looking to do is load 10,000 lines of mysql (image names) into an array and display them every 10 milliseconds from the top left of the screen, and when it gets to the last one, it automatically starts over again. I have supplied a link to an example of what someone else is doing, but they are using an API in realtime from instagram. Anyways, let me know if anyone has any ideas, I'm finding this difficult.
http://saopaulo-now.jit.su/
I also ideally want to be able to hover over to launch mini-video and show enlarged picture as well, but I need to figure out the actual functioning of the image array first lol.
bootstrap isn't a bad idea. I'm using the bootstrap-carousel to do an image area that swaps images.
it's not tough to use and you can alter how you access it. For that many images I'd probably use ajax to pull up the images and have my controller return the image with the current index (+1) to iterate through them all.
lots of variations of how you could implement and there are other carousel plugins you could use - bootstraps seems pretty tight.
here's a gist to help with some samples:
https://gist.github.com/3471760
nothing too fancy. good luck
I want to use a flash preloader for my php website. I have seen some javascript examples; but I want something attractive and cool. So I want use flash preloader which will show the percentage of the website loaded.My website is kinda heavy(with lot of images). It looks bad when the contents load. So I want to show a flash preloader while the site loads. Any help?
If you have a working javascript example it would not be that hard to change it so it calls a flash movie and tell it to update a progressbar or whatever.
Some example code can be found here:
http://www.permadi.com/tutorial/flashjscommand/
Not sure about the coolness of a flash preloader though. :)
instead of adding some annoying and useless flash-stuff you should think about optimizing your site to load faster so you don't need a loading-indicator (there are some nice artices on this on code.google.com) - i don't want to sound offensive, but if a site isn't loaded within a maximum of 2-3 seconds, a lot of users will be annoyed, leave your site and never come back, even if you have the coolest loading-bar ever.
what would be nice to know is waht makes your site so big. the biggest site i can think of is some kind of image-gallery, but even in that case, there is a much easier solution: show thumbnails of your pictures and open the "big" version only on clicking these.
I have a page that's very image-intensive. This is by client request - it's a list of merchants with a logo for each one. The list is quite long (over 500), and yes - the client insists on displaying all of them. We do have an ajax typeahead search to help users find what they're looking for without scrolling, so it's not a total disaster.
Here's the issue: the client is just now realizing that it takes a long time to load this page because of all the logos. Even if each one is only a few kb, it still adds up pretty quickly. He's now decided he wants a progress bar to display while the images are loading. I've never done that before, so I starting looking around, and most of the ones I've seen rely on getting an array of img tags and looping through to check the complete property. The problem I'm having (at least I think this is what's causing the problem) is that the image tags are generated by a database query, and I think the javascript to get the image array is loading before the image tags are finished loading. Obviously this isn't an issue on pages where the images are hard-coded.
Can anyone point me in the right direction of how I can implement a progress bar on img tags that get loaded dynamically? My site is written in PHP, so I'm perfectly happy to do something server-side if that would work better.
As pretty much everyone here has noted, this is a nasty problem to have to solve. Accordingly, I propose sidestepping the technical components of it and addressing only the human ones.
Leave everything almost exactly as it is. All you have to do is find or make a throbber (I use http://ajaxload.info/ and it couldn't be easier), and use it as the background image for a CSS selector that only applies to the logos on the page.
Users (and clients who make unreasonable requests!) are far more frustrated by a lack of responsiveness than they are by things taking time. This quick gimmicky fix might be just enough to coax site users to perceive the problem more as the latter than as the former.
CSS Sprites will definitely be a good start in your case. If you got 500 spearate images on one page, then browser will have to start 500 new connections to fetch them, and unfortunately, concurrent connections will be around 20 or something, so... it is not good.
CSS Sprites from css-tricks.com
I'd suggest pre-making and caching of the logos (or their various states), as your own hunch is that the main bottleneck is that "the image tags are generated by a database query". Is this at all possible?
It's better to store a few states or whatever with a naming scheme that makes it possible to fetch the right image, than regenerating them on-the-fly each time. Of course, you'll need a proper cache handling mechanism, so it's not like an easy task, but more often than not, your hunch is helping you in the right direction.
If you're able to boil it down to a few static files per logo, you could also consider using a CDN and/or multiple subdomains, as Michael Mao suggests.
I haven't tested this but something like this might work (its jQuery)
<?php // Do your select image stuff from here ?>
<html>
<head></head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var images = <?php echo json_encode($images); ?>;
$.each(images, function(i, image) {
$(new Image()).load(function () {
$('body').append(this);
alert('Loaded '+i+' out of '+images.length);
}).attr('src', image);
})
});
</script>
Since you already have a javascript search to get people to specific listings faster, how about loading a placeholder static image for all logos and then replacing the placeholder with the correct logos on an as-needed basis? "As-needed" could be determined by JavasScript calculation of window position and any typed input.
Do your just-in-time image loading from multiple subdomain masks to parallelize requests and you should be able to pop the images up somewhat quickly as-needed without bogging down the page by loading unnecessary images.
It's not pretty, but neither is the client's request.
Edit: As far as a progress bar goes, when you determine a window location (or typed-input location), determine how many listings will be in-view, and how many listings to buffer above and below the view. Then you'll have a total number of listings and you can update a JavaScript/HTML progressbar as you dynamically replace the logos within that range.
It would be much easier to answer the question if I could see the complete code but I can remember doing something remotely similar and I ended up using a custom JavaScript object. You could perhaps start with an object like this somewhere in the head of your app:
function Iterator() {
var counter = 0;
this.images = 215; // This number comes from the DB and gives you a total number of images
this.progress = counter / this.images
this.hasMore = function() { counter < this.images }
this.getPicture = function() {
// send a request to the server using counter as a parameter
// upon receiving this request the server should load only ONE image (LIMIT=1 in SQL)
// with OFFSET equal to the value of "counter"
// when the image loads (use whatever JS framework you need for that),
// we increment the counter:
counter++;
}
this.loadPictures = function() {
while this.hasMore() {
this.getPicture()
// You can do something with the "progress" attribute here, to be visualizad by your progress bar
}
}
);
You sure need to instantiate the Iterator object on body load and have it execute the "loadPictures" function.
Please let me know if you have any problems implementing that.
Here's a javascript-only solution that shouldn't require any modification to your server-side code. Using jquery:
$(document).ready(function() {
var loadedSoFar = 0;
//use jquery to get all image tags you want.
//The totalImgs is used to calculate percent and is the length of the jquery array
var totalImgs = $("#imgHolder img").each(function(i, img) {
//if this image has already loaded, add it to loadedSoFar.
if (img.complete)
loadedSoFar++;
else {
//otherwise add a load event for the image.
$(img).load(function() {
loadedSoFar++;
console.log("complete: " + (loadedSoFar / totalImgs * 100) + "%");
});
}
}).length;
});
I wrote this assuming all the images are already in the dom when the document.ready is called. If it is not, move this to a function and call it after the img tags are loaded into the dom from the server (via ajax request for instance).
Basically all it does is find all the imgs in imgHolder (modify the selector to match your situation), and wire the load event so it can update the loadedSoFar count. If the image has already loaded by the time this script runs, the load event would never fire, so increment the loadedSoFar counter right away. The number of total images that need to be loaded will be the length of the jquery object array returned by the selector.
I'll leave it to you to write a progress bar, but I do recommend this plugin: http://t.wits.sg/jquery-progress-bar/
I'd definitely try to avoid the progress bar -- you're going to really struggle with it.
If you really must do it, probably the best you can hope for is to fake it - ie have it show progress on a given amount of time, which you'd set as an approximation of the actual time it takes to load the page. Not foolproof but far easier than trying to actually time the loading progress.
Don't forget also that the progress bar itself will add to the loading time. And you'll need to have the code for it embedded in your actual HTML code; if it's in an external javascript file it could itself be subject to loading delays, which would make the whole excersise pointless.
So as I say, it's probably not worth the effort. What would be worth the effort would be to try to reduce the loading time. If it's noticable enough that you're considering a progress bar then there's something seriously wrong.
There are a whole stack to techniques for speeding up site loading times; it's a whole topic on its own. But I'll try to give you a few pointers. I suggest you also take some time googling for additional and follow-up information, though.
Image optimisation. If you haven't done so already, run all your images through an optimising program. You may find that you can reduce file sizes and thus load-times significantly.
CSS Sprites. One of the main causes of slow loading times is having too many separate HTTP requests. Since a browser can only load a given number of files at once, any files over that number will have to wait till others have finished before they can even begin loading. CSS sprites solves this by combining a number of images into a single file and using CSS to display only the relevant part of it in each spot. This is typically used for groups of related images.
Lazy Load. There is a jQuery plugin called LazyLoad which tells your page to load images only as they are needed. Images that are off the bottom of the viewable page are deferred until the user starts scrolling the page. This means that the images that are visible immediately are loaded first, making the page as a whole appear to load more quickly.
That'll do for now. There's loads more, of course, but all I'm really trying to say is: Optimise to get rid of the speed issue rather than trying to cobble together a band aid solution.
Hope that helps.
there are different ways to speedup image loading especially when you have a lot of them
Sprite - Use sprite where you group a number of images together and use the css background property (FACT: one big image better speed than multiple requested images).
Use the <image/> tag properly. You can add the lowsrc="" attribute to show a low resolution image until the real image aka src="" attribute is fully loaded
Use the ajax, although you may have 500+ images users will never see the full list. So you can load 6 at a time (or Nth at a time) when the document is fully loaded you can add the rest that way u can speed up the loading time as the user will only see some images and by the time they click next set of images they would have been loaded (or wait less) better yet to save broadband only use the ajax when required aka only when they click next or scroll down auto load new images. (look at google images and ajax used while scralling)
I am currently developing a web site with PHP + MySQL and jQuery. So far I have been doing it in my local machine. I notice that when I see the page the images on it take some time to load (few time but its visible). All images are small (PNG's with less than 3 KB). Now, when I load the page, there are some database connections happening in order to get some data that I will display.
I am not sure if this loading time issue has something to do with the amount of images, or with the time that the PHP script + the DB connections take to execute. (I have very little data in my database so I wouldn't assume this case.)
My question is: Is it a good approach to preload all the images in the beginning of each page? I tried it with jQuery and it works fine. I'm just not sure which disadvantages I can get with it. For example, to do so, I need to include the jQuery library in the beginning of the page? I thought it was a bad practice.
If these PNGs are stored in the database as BLOBs — not clear from your question — don't do that. Serving images from a DB through PHP is not as efficient as letting the web server serve them straight from the filesystem. If the images are tied to particular records, just name the PNG after the row ID, so you can find it in a directory dedicated to storing those images. The PHP code then just generates the URL that points to the PNG file on disk, so the web server can send them statically.
I don't think preloading the images within the same page is going to buy you anything. If anything, it might slow the apparent overall page load time because the browser can only retrieve a fixed number of resources concurrently, typically 2-4. Loading images at the top of the <body> means there are other things at the top of the page "above the fold" that have to wait for some HTTP connection slots to free up. Better to let the images load in their natural order.
Preloading makes sense in two situations:
The image isn't shown by default, but is expected to be needed as the user interacts with the page. Good examples of this are the hover and click state images for rollovers.
The image isn't used on this page, but will be needed on the next. Good examples of this are any site where there is a clear progression from one page to the next, like in a shopping cart.
Either way, do the preload at the very bottom of the <body>, so everything else loads first.
Having addressed those two issues, run YSlow on your site. It started out as a plugin for Firebug, which in turn is a plugin for Firefox, but it's since been ported to all major browsers except IE.
The beauty of YSlow is that it detects common slowdowns automatically, just by loading the page while the extension is active. It then gives you a clear grade for the page, so you can judge when you're "done" optimizing. If you're below an A, you're not done yet. :) It's not uncommon to see sites rating a D or worse, because the default configuration for web servers is conservative to avoid causing problems. Fixing YSlow warnings is generally pretty easy, but you have to be careful to avoid creating caching and other problems, which is why the default server config doesn't do these things.
Another answer recommended the Google PageSpeed offering. It's available as a plugin for Chrome and Firefox, as a server-side Apache module, and as a Google-hosted service. I have no idea how it compares to YSlow, but it looks interesting.
Also consider using the browser's debugger to get a waterfall graph of resource load times:
In Firebug you get this in the Net tab.
In Safari, you get to it via the Develop menu, which is normally disabled in Preferences. Turn it on if needed, then say Develop > Start Timeline Recording. That puts you into the Network Requests instrument. You can also get to it through Develop > Show Web Inspector.
In Chrome, say View > Developer > Developer Tools, then go to the Network tab.
IE has a very weak form of this, via Tools > Developer Tools > Profiler. It just gives a table of numbers, rather than a waterfall graph, so the information is there, but you can't just visually scan for long bars to find the slowest resources.
You should use page speed plugin from google to check what data takes most of the time to load. It will show separate load times for images as well.
If you're using lots of small pngs I suggest you combining them into one image and manipulating the display via css background property since they are part of styling and not information. In that case - instead of few images only one will be loaded and reused through all elements. In this case even preloading of one image is really easy.
Have you considered using CSS Sprites to combine all of your images into a single download? There are a number of tools online to help you do this, and it will significantly reduce the number of HTTP requests required by your page.
Make sure you have set the correct Expires header on your images to allow them to be cached.
Finally, take a look at YSlow which can provide you with futher optimisation tips.