0

私はWeb開発にかなり慣れていないので、無知を許してください。高解像度画像のほんの一部である色見本を生成するページに取り組んでいます。一度に生成されるこれらの見本は最大70個あります。私の問題は、最初の試行で画像を完全に表示できないことです。画像を完全にロードするには、関数を再度呼び出す必要があります。ロード時にスウォッチを表示する関数を設定した場合（JQueryの.loadを使用しています）、実際にロードされることはないため、トリガーされることはありません。大量のコンテンツを含むページを強制的にフルロードする方法はありますか？

function showswatches(section, xmlHttpObj){
    for(i=0;i<xmlHttpObj.length;i++){
        if(xmlHttpObj[i].getElementsByTagName('section')[0].childNodes[0].nodeValue == section){
            $('#swatches').html();
            var colors = xmlHttpObj[i].getElementsByTagName('color');
            for(j=0;j<colors.length;j++){
                $('#swatches').append('<div class="swatch">');
                $('#swatches').append('<img src='+colors[j].childNodes[0].nodeValue+'>');
                $('#swatches').append('</div>');
            }
        }
    }
}
4

1 に答える 1

1

私はあなたに2つのオプションを与えることができます-

最初のオプション-

各画像にハンドラーを追加し.load()、画像が完全に読み込まれた場合にのみ画像を表示します（その間に、ある種のローダーを表示できる可能性があります）。すべての画像に同じクラスを与えると、猫は一度にすべての画像にイベントを添付します。たとえば、すべての<img>要素にpreloadImgクラスが含まれていて、コンテナdivに小さなローダー要素を配置した場合swatch、次のようなハンドラーを作成できます-

$('img.preloadImg').on('load',function(){
  $(this).parent().find('loader').hide(); // hide loader
  $(this).show();  // images initially hidden
});

2番目のオプション-

JavaScriptを使用してスウォッチをプリロードして、ドキュメント全体が読み込まれ、jQueryがdocument.readyコールバックを起動する前に読み込みを開始することができます。このために、JavaScriptImage()オブジェクトの配列を作成し、それぞれに適切なsrcプロパティを与えることができます。

var imagePaths = ['swatch1.png','swatch2.png','swatch3.png'];
var imageLoader = new Array();
for(var i=0;i<imagePaths.length;i++){
  var img = new Image();
  img.src = imagePaths[i];
  imageLoader.push(img);
}

Image()オブジェクトを作成してsrcプロパティを指定するとすぐに、画像の読み込みが開始されます。これにより、前述のように読み込み時間が短縮される可能性があります。JavaScriptが利用可能になるとすぐに、jQueryが読み込まれる前に、さらには画像の読み込みが開始されます。完全なHTMLコンテンツがロードされる前。

于 2012-08-15T16:14:43.000 に答える