15

私は 5 つほどの非表示の div を持つ jquery ベースのホームページに取り組んでおり、それぞれに複数の背景 css イメージが含まれています。

問題は、親レイヤーの可視性が表示されるまでブラウザーが CSS 画像を DOM にロードしないため、レイヤーが表示されると画像の読み込みが遅くなることです。

私がすでに検討した解決策：

  • CSS スプライト (このために再設計するにはあまりにも多くの作業が必要であり、div を表示/非表示にするときは実際には機能しません)
  • CSS背景画像を自動ロードするこのjQueryプラグイン（他の多くの人が報告しているように、私にとってはうまくいきません）。

  • js 経由で画像をプリロードする:

    $(function() {
function preloadImg(image) {
  var img = new Image();
  img.src = image;
}

preloadImg('/images/home/search_bg_selected.png');
});

    このソリューションは、画像をdomに2回ロードするようです.jsがロードするときに1回、ロードするdivレイヤーが表示されるときに再度... 2回のHTTP呼び出しを行うため、機能しません。

私が見逃しているこの問題の他の解決策はありますか?

4

5 に答える 5

13

他の方法と言ったのは、Javascript を使用しない方法のことですか?

<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>

他の非 JS の方法は、ページのどこかに html を配置して、表示されないようにすることです。

<image src="picture.jpg" width="1" height="1" border="0">

またはHTML...

<img src="images/arrow-down.png" class="hiddenPic" />

...そしてCSS...

.hiddenPic {
    height:1px;
    width:1px;
}

その他の JavaScript メソッド:

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

次に、次のようなものを使用して画像をロードします。

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>
于 2009-11-24T02:14:36.330 に答える
7

他のソリューションのような URL のハード コーディングは、コードのメンテナンスに負担をかけることを示唆しています。これを回避し、jQuery を使用して一般的なソリューションを作成するのは比較的簡単です。

この関数は、すべての隠し要素を選択し、それらに背景画像があるかどうかを確認してから、それらを隠しダミー要素にロードします。

$(':hidden').each(function() {
  //checks for background-image tab
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, "");
    $('<img/>')[0].src = imgUrl;
  }
});
于 2012-02-07T15:05:04.970 に答える
7

CSS のプリロードは簡単です。

例：

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png)
}
于 2013-01-17T23:41:25.610 に答える
2

「このソリューションは、画像をDOMに2回ロードするようです... 1回はjsが画像をロードし、次にそれをロードするdivレイヤーが表示されるようになると... 2回のhttp呼び出しを行うため、機能しません」

2番目のhttpリクエストは304（変更されていない）で応答するはずなので、大丈夫だと思いますか？もう1つのオプションは、jQueryを介して画像を読み込み、DOMを介して背景画像としてインラインで挿入することです。

jQuery.fn.insertPreload = function(src) {
    return this.each(function() {
        var $this = $(this);
        $(new Image()).load(function(e) {
            $this.css('backgroundImage','url('+src+')');
        }).attr('src',src);
    });
};

$('div').insertPreload('[huge image source]');
于 2009-11-24T02:41:47.943 に答える