3

私はRuby on Rails Webアプリを持っています.いくつかのビューでは、<img>レンダリングする多くの重い画像( )があります.<img>これらはヘルパーで生成されます.

問題は、css が最初に読み込まれ、次に js、次に重い画像、最後に css が参照する背景画像が読み込まれることです。

重い画像をすべて読み込むにはかなりの時間がかかるため、サイト全体が滞ります。

最初にCSSの背景画像をロードしてから、他の画像をロードしたいと思います。それらは明らかにページの視覚的構造を保持しているためです。

レールのバージョン: 2.3.8

編集: ありがとうございます。以前にコードを共有していなかったことをお詫びします。

カテゴリと画像の 2 つのモデルがあります。各カテゴリには多くの画像があります。ビューには、ヘルパーによって生成されたカテゴリのリストがあります。

 
カテゴリーごとに |猫|
    html <<"<a href='##{cat.id}' class='mapcat' >#{cat.libelle}</a>"
終わり

カテゴリをクリックすると、画像が表示されます

category_images.each do |i|
    html <<"<div id='#{i.id}' class='#{css}'><img src='/images_moi/categories/#{cat.libelle}/#{i.path_file_name}' />"
  終わり

カテゴリのリストに関連付けられた css 背景画像があります 問題は、カテゴリのリストの<img>css 背景画像の前に画像 ( ) が表示されることです。

4

4 に答える 4

7

あなたはあなたのコードを共有していないので、私たちは物事を想定する必要があります。

クエリについて言えば、今のところ、jQueryを使用して画像をプリロードできます。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

これにより、画像をロードする時間を節約できます。

于 2012-10-30T12:21:51.237 に答える
0

解決策：imgタグを使用しないでください。

  1. すべての画像を含むスプライトを作成します。スプライトをapplication.htmlレイアウトに一度ロードします。
  2. data urisを使用して、データをhtmlで直接送信します。http://css-tricks.com/data-uris/を参照してください
于 2012-10-30T12:35:12.793 に答える
0

私のアプローチは、jquery と data-tags を使用して画像を遅延ロードすることです。このアプローチにより、デバイスの幅やタブレット/モバイル ユーザーの予備に基づいて、さまざまな画像を選択することもできます。

<img src="" data-src="/img/graphic-desktop.jpg" data-smallsrc="/img/graphic-smaller.jpg" alt="Graphics" class="lazy" />

<!-- the following would be in your js file -->
$lazy = $('img.lazy');

$(window).load(function(){
  // window load will wait for all page elements to load, including css backgrounds
  $lazy.each(function(){
    // run thru each img.lazy on the page. spare the jquery calls by making $this a variable
    $this = $(this);
    // if the window is greater then 800px wide, use data-src, otherwise, use the smaller graphic
    ($(window).width() >= 800) ? $this.attr('src', $this.attr('data-src')) : $this.attr('src', $this.attr('data-smallsrc'));
  });
});
于 2013-06-04T22:27:52.470 に答える