File "example2.html"

Full Path: /srv/www/www.cadoro.it/app/lib/imgcache.js/examples/example2.html
File size: 3.2 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.imagesloaded.min.js"></script>
    <script src="../js/imgcache.js"></script>
    <!-- only for cordova (replace by phonegap.js for phonegap) - ignore on desktop browser -->
    <script src="../cordova.js"></script>
    <script>
        var startTest = function() {
            /* Note: this is using version 2.x of the imagesloaded library, use of current version might differ */
            $('body').imagesLoaded(function($images, $proper, $broken ) {

                // see console output for debug info
                ImgCache.options.debug = true;
                ImgCache.options.usePersistentCache = true;

                ImgCache.init(function() {
                    // 1. cache images
                    for (var i = 0; i < $proper.length; i++) {
                        ImgCache.cacheFile($($proper[i]).attr('src'));
                    }
                    // 2. broken images get replaced
                    for (var i = 0; i < $broken.length; i++) {
                        ImgCache.useCachedFile($($broken[i]));
                    }

                });
            });
        };

        if (typeof(cordova) !== 'undefined') {
            // cordova test
            document.addEventListener('deviceready', startTest, false);
        } else {
            // normal browser test
            $(document).ready(startTest);
        }
    </script>
    <link rel="stylesheet" href="examples.css">
</head>
<body>

    <h1>imgcache.js - example #2</h1>

    <div class="clearfix">

        <div id="actions">
            <ol>
                <li>Open page locally (file:// in Chrome) or in Phonegap/Cordova</li>
                <li>Work offline</li>
                <li>Reload the page (or re-start the web app)</li>
                <li>You should see the images reloaded from the cache</li>
            </ol>
            <p>Note: this is using version 2.x of the imagesloaded library, use of current version might differ</p>
            </ol>
        </div>

        <div class="note">
            <p>Don't forget to accept your browser request to store data on the local computer!</p>
        </div>
        <div class="note">
            <p>If this file is opened in Chrome from a "file://" url, run Chrome with the following flags: <code>--allow-file-access-from-files --allow-file-access</code> in order to <a href="http://stackoverflow.com/questions/6427870/html5-file-api-security-error-while-reading-a-file">avoid a security error</a>.</p>
            <p>Otherwise run the page from a web server - <a href="http://updates.html5rocks.com/2011/08/Debugging-the-Filesystem-API">More info</a></p>
        </div>

    </div>

    <div>
        <!-- random image on domain with CORS enabled -->
        <h2>Random test images</h2>

        <img src="http://data-gov.tw.rpi.edu/w/images/thumb/b/b1/State-lib-sum.png/120px-State-lib-sum.png">
        <img src="http://data-gov.tw.rpi.edu/w/images/thumb/f/f1/Processing_Tutorial_Finished.png/180px-Processing_Tutorial_Finished.png">
        <img src="http://data-gov.tw.rpi.edu/w/images/thumb/d/d7/Ec2.png/150px-Ec2.png">
    </div>

</body>
</html>