-1

フェード効果のある画像スライドショーを実装する小さなjQueryプログラムがあります。画像がレンダリングされ、次の画像を表示する必要がある場合、最初に背景に読み込まれ、次にレンダリングされます。画像をロードするコードは以下のとおりです。

    var img = $('<img/>'); 
    img.attr('src', imageUrl);

    img.load(function()
      {
        $(photo).attr('loaded' + mediaSize, true)
                .attr('width',              this.width)
                .attr('height',             this.height);
        renderPhoto(photo, mediaSize);
      });

renderPhoto（）で写真をレンダリングするための関連部分は次のとおりです。

    $("#image" + activeContainer).css({ "background-image" : "url(" + imageUrl + ")" });

ロードされた画像を追跡し、それらを2回再読み込みしないコントロールもあります。これは、以前にロードされた画像がブラウザのキャッシュにあることを前提としています。

キャッシュ以外はすべて正常に動作しています。（上記の最新のコード行を使用して）画像がレンダリングされるたびに、画像は常にサーバーから再ロードされ、フェードイン効果が損なわれます。

サーバーから返されたヘッダーは、キャッシュに問題がないようです。

% curl -o /tmp/x -v http://stoppingdown.net/media/stillimages/20100102-0072/1280/image.jpg
* About to connect() to stoppingdown.net port 80 (#0)
*   Trying 78.46.194.117...   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0connected
* Connected to stoppingdown.net (78.46.194.117) port 80 (#0)
> GET /media/stillimages/20100102-0072/1280/image.jpg HTTP/1.1
> User-Agent: curl/7.21.4 (universal-apple-darwin11.0) libcurl/7.21.4 OpenSSL/0.9.8r zlib/1.2.5
> Host: stoppingdown.net
> Accept: */*
> 
< HTTP/1.1 200 OK
< Date: Sun, 04 Nov 2012 11:52:08 GMT
< X-NorthernWind-Version: 1.1-ALPHA-19
< Content-Type: image/jpeg
< Content-Length: 2207579
< Last-Modified: Thu, 01 Nov 2012 00:08:11 CET
< ETag: "1351724891000"
< Expires: Sun, 11 Nov 2012 12:52:08 CET
< Server: Jetty(6.1.24)
< 
{ [data not shown]

Chromeでデバッグし、リソースペインを見ると、同じ画像の複数のエントリが各ラウンドで再読み込みされていることがわかります（たとえば、最初のラウンドでは20031227-0085.jpgが表示され、スライドショーが2番目のサイクルを開始すると2つ表示されます） 20031227-0085.jpg、次に3など）。間違いなく、リソースはブラウザのキャッシュにロードされていません...そしてその理由がわかりません。

ありがとう。

PS完全なコードはここから入手できます。

4

2 に答える 2

1

実際、jQueryコードが正しく機能していることがわかりました。問題は、キャッシングを適切にサポートしていなかったサーバーにありました（304 "Not Modified"が使用されることになっている場合でも、ペイロードとともに200 HTTPステータスを常に送り返していました）。サーバーの問題を修正すると、すべてが修正されました。

于 2014-05-15T21:00:42.803 に答える
0

jqueryの例を参照してください。ロード中に画像を表示せずに、画像をプリロードする方法は次のとおりです。

HTML：

​&lt;div>Here will be image</div>
<button>Click to load</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.images {
 width: 100px;
 height: 100px;
 border: 1px solid black; 
 transition: background 1s,width 1s,height 1s;
 -webkit-transition: background 1s,width 1s,height 1s;
 -mozilla-transition: background 1s,width 1s,height 1s;
 -o-transition: background 1s,width 1s,height 1s;
}​

JS：

var showimage = function(image) {
    var div = $('.images');
    div.empty();
    div.width(image.get(0).width);
    div.height(image.get(0).height);
    div.css({
        'background-image': "url(" + image.attr('src') + ")"
    });

}

var images = ['http://www.dragongoserver.net/images/dragonlogo_bl.jpg', 'http://www.dragongoserver.net/images/dragon_logo.jpg', 'http://cdn.last.fm/flatness/listen/radio_icon_medium.png']
$('button').click(function() {
    var image = $(new Image());
    image.attr('src', images[0]);
    images.push(images.shift());
    if (image.get(0).complete === true) {
        showimage(image);
    } else {
        image.load(function() {
            console.log('loading...');
            showimage(image);
        });
    }
});​
于 2012-11-04T14:13:24.173 に答える