JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.css">
<div ng-app ng-controller="myCtrl" class='row-fluid'>
    <div class="span4">
        <div class="row-fluid">
            <div class='thumbnail span12'>
                <img ng-src="{{images[index]}}" alt="" />
            </div>
        </div>
        <button class="btn" ng-click='index=index-1'>prev</button>
        <button class="btn" ng-click='index=index+1'>next</button>
    </div>
    <div class="span8">
        <p>I'm buiding a web app to browse big photoes on local server</p>
        <p>Strange thing is that the Chrome load image form cache cost too much time,even much more than download from the local server.</p>
        <p>Each photo is about 5Mb, Chome donwload it cost about 200ms, but cost about 400ms from the cache.</p>
        <p>I can't find images with such size on the web, so you might need fiddle2 or Charies to map these images to your own local images.And rewrite the header to make Chrome to cache them:</p>
<pre>Expires:Wed, 17 Jul 2013 01:50:08 GMT
Cache-Control:max-age=604800
Connection:keep-alive
Date:Wed, 10 Jul 2013 07:33:51 GMT
Last-Modified:Wed, 10 Jul 2013 01:13:26 GMT
</pre>

        <p>My environment is Mac OSX 10.8.4,and I have tested it on pc---it's cost about 700ms.</p>
    </div>
</div>

JavaScript

function myCtrl($scope) {
    $scope.index = 1;
    $scope.images = [
        "1.jpg",
        "2.jpg",
        "3.jpg",
        "4.jpg",
        "5.jpg",
        "6.jpg",
        "7.jpg",
        "8.jpg",
        "9.jpg",
        "10.jpg",
        "11.jpg",
        "12.jpg"];
    $scope.$watch('index', function (newValue) {
        if (newValue < 0) {
            newValue = 0
        } else if (newValue > $scope.images.length) {
            newValue = $scope.images.length
        }
        $scope.index = newValue
    })
}