So, I think there are many ways to approach the subject of pre-loading images, or loading images on demand… but I wanted to share with you how I normally create a dynamic JavaScript based application. I call this “my logic” or “my methodology” as it’s something I thought up without looking at another developers code. I also use this same methodology in my post on the Facebook-style infinite wall posting.

I am not sure if any other people use this method, but my theory/logic uses placeholders, with a script that is called on a specific event (scrolling down/rotate/etc) to detect and load content/graphics to replace the empty placeholder. These same principals are used in my “facebook-like” infinitely scrolling wall post, just with a different application. The reason I do this, is it’s an easy way to detect how much content is not loaded, and load on demand.

In video above, I explain try to briefly explain how my placeholders work, and I’ll explain in detail below why I do things this way.

LET’S GET STARTED:

The first thing you will need is a data source, in this instance I have a JSON object holding my images and text along with as other supporting content. We’ll use this to data object build out my structure, as well as load my initial data to the page. I’ve shortened this object down to only include two items for simplicity.

You can easily get the size of your JSON object by using the .length property. If you have never worked with JSON before, it’s worth researching and is very powerful, especially when you are building JavaScript applications. JSON is JavaScript so they work amazing when combined.

The third thing you will need is your initial function to push the data to the page. You can push no data, one item, two items, etc… It’s really up to you and really should be dependent on the applications needs. In my instance I am loading two images on ready, one for the active showing image, then the image to the right we’ll be sliding to within 7 seconds.

You will need some sort of function to check for a change, or an event. In this case, we are sliding the images every 7 seconds. Here is my setInterval function:

The next function is the actual fun part, the animation. This is a simple jQuery based .animate() which will slide to the left the pixel width of the image area. As the animation is happening, i also call the preloader function to get the next image loaded into the page as well.

The last function is called as the animation is happening (see above “CALL PRELOADER” comment). This function first looks into the container of slides, and gets the index() of the first “not-loaded” classed item. This is great, because it tells us which index # to pull from our data source. So we do a simple .load() function to pull in the image, and then once loaded, we place the item before the first not-loaded item, then remove the not-loaded item. Hopefully that makes sense! In this instance I have 3 images to load, one main screenshot image of the website, then two smaller images for the mobile screenshots. I load the main image, then call both the smaller images at the same time on complete of the main image load.

• Visit the demo site
• Download the zip file with source

Hope it all makes sense!

Joel

In this blog posting I want to show how i built a dynamic on-demand facebook style wall. Again, just like my explanation in the mobile slider posting I am using my “placeholder” methodology. I call this “my methodology” as when I set out to build this functionality, I didn’t want to just copy another developer’s creation or logic. I came up with the approach of using tags as placeholders. In this case specifically, I am using a list item structure, with all the data contained inside this structure. I place the path to the image we need to load inside this structure, then only call it when requested.

The first piece of business you’ll need to take care of is your data or database of items that need to be loaded. In this case, i am just using a simple list-item structure. I used PHP to loop through a mySQL database (wordpress DB). I push out this list-item structure based on what I need, in this case, the image, the title, permalink, and the excerpt. You can build out your list item structure, or use empty image tags with a class on them, however you’d like to build the “placeholders” really doesn’t matter.

Below is a modified version of my code, showing two already loaded list-items, and two items yet to be loaded (notice the hidden class).

To make the initial 2 portfolio items load, i am doing a simple .each() function to loop through the first 6 items and change their class over to loading. Once I do that, I simply call my loadFolios() function, which will loop through each .loading classed item (continued below).

The loading of the actual image is contained in one simple, yet powerful function. What you see here, is when the function is called, i get the first item with the loading class then ajax in the image using the path which is contained in the .pf-thumb list-item. Once the image is loaded, I remove the loading class, and push the image into the container. When that one is complete, it looks for the next instance of a .loading class, and loads that one. Sequentially loads all the images, in order. SIMPLE, yet AMAZINGLY powerful!

To make the wall work when you scroll down, I built a reverse function using the built in JavaScript function scrollTop(). This basically detects “scrollBottom” which doesn’t exist. The 200 number is the range, you could set this to < 1, and only when they bottom out the scrollbar would it load more... In this case I wanted it to act more "seemless"

• View the live example (My portfolio page)
• Download the source JavaScript file

Hope this all makes sense, and if you agree or disagree with my logic, please post up comments!

Joel

My current site is a mix of everything I do best. The site is a mix of PHP, HTML5, responsive design (I designed this site too!), JavaScript/jQuery, and some WordPress to manage content.

The homepage is a mix of media queries and also I am using some jQuery to do some repositioning and resizing of the features rotating area. The features area is all pulled from WordPress posts, I am using PHP to connect to the WordPress database an pull out only the data I need. The same is true for the Labs area in the lower right as well. Everything is then built in HTML5 with a lot of CSS3, as well as media queries to make the responsive design work.

The sub-pages are also mainly built with my own PHP code, with the exception being the LABS area. That is all built on WordPress, and I built a theme to match my overall look and feel.

The Portfolio page is an infinitely scrolling page that i built using PHP to build out my content structure, and then some nifty jQuery I wrote to check the scrollHeight, and then AJAX in the next image dynamically.

Let me know if you have any comments, feedback, or questions on how I did anything, or if you would like clarification on any of my code.

I am working on this article, which will detail how to not only do a responsive design that will conform to browser size, but also deliver content based on the user’s connection (user agent). You don’t want to be sending 1mb images to a person on a mobile/3G connection (or even worse, Edge!).