Join James Williamson for an in-depth discussion in this video Loading resources with Modernizr, part of Applied Responsive Design.
While Modernizr is fantastic for detecting capabilities and then allowing you to create fallback experiences, it also really excels as a resource loader. Modernizr comes with the yepnope.js loader built right in, so you have an amazing amount of control over how external resources load, what happens after they load, and then providing fallbacks for what happens when content doesn't load. Best of all, Modernizr can load resources asynchronously, which can dramatically speed up page loads. Okay, so for this exercise, we're going to be doing a lot here, guys.
Go in the 06_02 directory, and you want to open up index.htm, contact.htm, and philadelphia.htm. Go ahead and open all those up. Right now, they have been stripped of all their resources, which is terrible. So all that stuff that we were doing before, where we down towards the footer and loading up all these external scripts, we have done away with all of that. Now what that means is, right now nothing is working. Our gallery is not working; our dropdown menus are not working; our archive galleries menu isn't being converted over to a select menu. All that stuff that we've worked so hard on up to this point in our course no longer work.
Okay, now the reason for that is because we really want to do this in an efficient way, and we want to have a lot of control over when and how resources load, and that's what Modernizr is going to help us do. So what I am going to do is I am going to start on the index page, and I am just going to create a line here between the footer and the body, okay. So I'm going to create a script tag. First, I am going to load up my Modernizr file. Now in this exercise, in _scripts directory, we've added the customized build I did for modernizr and respond.js. Now, I have changed the title or the name of the Modernizr download, so if you download your own and you want to change the name to make it a little bit easier to type in, you can certainly do that.
So, the source for this is going to be _scripts/modernizr. It takes a while for you to learn how to spell Modernizr--it's just the way they did it--.custom.js. And I probably should have copied and paste that. I know that's going to come back and bite me later on. I'll close the script tag. So, that is one thing that we have to do. We do have to load up the Modernizr library obviously before we can start using the resource loader built into it. But after that, now we can do everything using the yepnope loader. All right! So I am going to do another opening script tag and then close it, and I am going to scroll down a little bit.
And then I am going to give myself some space. If you guys have never used a loader script before, the syntax may be a little odd here. So just bear with me, and I am going to walk you through it. I am going to type in a comment here. This is actually going to help me explain what's going on or what the Modernizr script is doing. I am going to say use the Modernizr loader to load up external scripts. This will load the scripts asynchronously, but the order listed matters.
All right, so what this means is, we're going to pass an array of scripts that we want to load. It's going to load them all in parallel, okay, so they are going to load at the same time. It's not going to wait for one to finish load and then load the other one. So, that is good because that's quick, but it's also dangerous because that means that you could have one library that's dependent on another one and the dependent library, if it finishes after the other one and then that one calls it and it's not there. So, this is why the order that it loads in matters. Although it will load all scripts in parallel, it will execute them in the order listed.
So that's what's important about the order. It's going to load them up in parallel, but it won't start executing them until they all load, and it's going to load them in the order that we list them into the array. Let's get into loading this up. So I am just going to type in the Modernizr.load, and then what I am going to do is I am going to open a parenthesis and then I am going to do a square brace, or bracket. I don't know, whatever it's called. And then down towards the end, again I am a big fan of closing the stuff before I start doing something else. I am going to close that, type in a semicolon.
All right, so there is our Modernizr loader object. One of the nice things about this loader object is we can pass in several different loading requests, and we do that by using these curly braces. So I am going to open up a curly brace, and then I'm going to come down here and close a curly brace, just like that. Now there are multiple ways to use loader syntax. One is you can do them all individually. You can just do a load, call, and then point to the resource you want and then type in a comma, and you can just do this comma-separated list. I actually like using this method of passing in an array.
To me it seems like it's a little bit more efficient. You can do it all on a single line, but I am going to do it on multiple lines, just so it's a little easier for us to read. So I am going to type in load and then a colon, and then I am going to open up a square bracket and then close the square bracket. Let me tab and indent this so I could read this a little bit better. Now each of these can go on their own line, and I just have to pass in who I want to load up. And first one is going to be http://ajax. googleapis.com/ajax/lib/jquery/1.9.0/jquery.min.js.
And yes, I probably should have copied and pasted that from somewhere. And also remember, in deployment, if I am not testing this locally, I would leave off the protocol. Now, we separate these with a comma, so this is a comma-separated list. I am going to go down to the next line and I am going to load in my desolve scripts. So I am just going to point to my scripts folder /deslove.js, then another single quotation mark there as well. So you can string as many of these in as you want. I really only need these two right now.
I'm going to highlight this, copy it, and then paste it in each of these pages, just below the footer, but before the closing body tag. I'm going to save the contact, and then I am going to do this on the Philadelphia one. Now, here is one of the beauties of using this loader this way. Because Philadelphia has the photo gallery, it needs more resources than the other ones do. Well, that's okay. I can just put as many resources into this loader object as I need to.
so what I am going to do is I am just going to create a couple of blank lines here above the desolve.js. Remember, I am doing them in the order that I want them to execute. So, this one is going to be _scripts/klass.min.js. Now, don't forget the comma between these guys. Then the next one is going to be _scripts/code.photoswipe. jquery-3.0.5.js. And yes, it would have been better had I copied and pasted it. And then don't forget your comma.
All right, so in addition to what we were loading up in our other pages, now I am also loading up my klass library and my photoswipe library, and I'm listing them in the order that I want them to execute. They will all load in parallel, but I want to list them in the order that I want them to execute. Okay, that's great, but how do we instantiate our photoswipe library? How do we do that? How do we make that call? Well, I don't have to write separate functions anymore. I can just call right directly from the loader object. So as soon as this is done loading, you can call anything that you want.
So right after my loader object, right after that square little closing brace there, I am going to add a comma. Then I am going to go down on the next line, and now I am going to type in complete. So there are a couple of things that you can do. You can use callback functions or you can use a complete. Now the complete basically is going to say hey, when those guys have executed, when they've all executed, now do this. And I can just go ahead and do function, and then inside that function I can just go ahead and instantiate my photo gallery.
So just the same way we did before, var. As a matter of fact, if you don't feel like typing it, you can simply copy and paste it. myPhotoSwipe =. And then if you remember, we were targeting the photoGallery a, and then we're going to do just the generic photoSwipe instantiation. And now, if I save this and test the Philadelphia page, not only are the menus working, but if I click the gallery, the gallery is now working as well, so it's bringing in those resources and I am firing a complete function to instantiate the photo gallery as soon as they've finished loading.
And you know, if we really only needed to load just these assets, using a loader like Modernizr really wouldn't make a whole lot of sense. You know, it's one of those if you have a hammer, everything starts little like a nail type deal. We're not really gaining that much speed by using these guys in parallel. Most browsers, as a matter of fact, will start to load things in parallel now by default. So we could just load them up using normal script tags if we want and let the browser handle loading and we wouldn't really notice that big of a difference. But if we had a lot of external resources, we'd see better performance enhancements based on this asynchronous loading. And using Modernizr as a loader has other benefits as well, as we're going to see in our next exercise.
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites