Question: so suppose i have a whole bunch of images in a page, and then I go to a different url that has the exact same images and layout, since the url is different the browser will reload all images,layout etc and will not display them from the cache even though they are the exact same images/layout....

is there a way to prevent this and control the way browser caches things using only javascript, php, or html?

***EDIT/Addition***

also what's interesting is that first of all I have two copies of the same site, one on my local server and another one on a remote hosting server.....

the one on the local server caches perfectly and none of the images reappear, whereas if I access the one on the remote server, the images would try to reappear....despite the fact that the files,etc are virtually identical between the local and remote server...

***EDIT/Addition***

Another interesting thing....the caching would work on IE and Chrome even for the remote server, but for some reason, it would screw up in firefox....

on the other hand the one in the local server would work even for firefox

Answer: 
To get the most out of YUI's loader pattern, you do have to play by a few of its rules. Your example looks almost exactly right, as far as directory patterning goes.

Unless you explicitly include your javascript source files in your document, you will need to notify the YUI loader that the modules exist and what dependencies they have. At the moment, there's [a bug](http://yuilibrary.com/projects/yui3/ticket/2528660) in the way dependencies are loaded for a module, so you have to declare the dependencies in two places, in your loader configuration, and as a postfix to your YUI.add statements.

You can configure the loader in two ways: you can pass the config as an argument to YUI() before calling use on it, or you can assign the configuration to the YUI\_config global variable:

```
var cfg = {
    /* other configs */
    modules: {
        'mod3-base': { requires: [ 'mod3-class1', 'mod3-class2' ] },
        'mod3-class1': { /* */ },
        'mod3-class2': { /* */ }
    }
}

// You could pass the config in as an argument:
YUI(cfg).use('mod3-class2', function(Y) {
    // your code
});

// Or set it as a magic global:
YUI_config = cfg; // will implicitly configure all YUI().use statements

```

You'll need to configure the loader so it knows where to find your module files.

Generally, the loader expects each module to have its own directory, which contains one or more submodule files and a concatenated "supermodule" file. For example, looking at the "Base" module we see the following pattern:

1. base-base.js
2. base-build.js
3. base-pluginhost.js
4. base.js: a concatenated copy of base-base, base-build, and base-pluginhost

Each of those four types has three variants, a "raw" source file, a "-min", and a "-debug". Depending on how you configure your loader, it might go looking for the minified variants.
The correct way to do this is to list the modules your page needs in the `YUI.use()` call and list the modules that those modules need as requirements.

Suppose that you wish to use `mod3-class2` in your page and that `mod3-class2` depends on `mod1-base` and `mod3-base`. You would want something like this in your main page:

```
YUI().use('mod3-class2', function (Y) {
    /* Your code here */
});

```

You would then specify `mod3-class2`'s dependencies in `mod3-class2.js` like this:

```
YUI.add('mod3-class2', function(Y) {
    /* Module code here */
}, 'module version', {
    requires: ['mod1-base', 'mod3-base']
});

```

You can also use the [YUI Build Tool](http://yuilibrary.com/projects/builder), which uses config files to generate that wrapper code.