4

私のgoogle-fuはこれで私を失敗させています。以下のような一連のdivが他のhtmlの中に散在しているhtmlページがあります。

<div class="featureImage" style="background-image:url('defaultBackground');">
<a href="linkHere" style="background:url('realBackground') no-repeat center center;"> </a>
</div>

これらの機能画像（realBrackground）はプリロードされていないため、それらを表示するタブが表示されたときにのみロードされます。私が本当にやりたいのは、ページがレンダリングされた後、jqueryにバックグラウンドでそれらをプリロードさせることですdocument.ready（）ユーザーが別のタブをクリックすると、特徴画像の表示は瞬時に行われますが、ロードは行われません最初のページ表示を遅くします。

私が試したjqueryセレクターはでし$(".featureImage > a").css("background-image")たが、それをコード化して、そのすべてのインスタンスを調べて検索し、ページがレンダリングされた後に実際に画像をプリロードするにはどうすればよいですか？

アップデート：

jquery画像のプリロードとjQueryクイックヒント：CSS背景画像の抽出の助けを借りて答えを見つけました

重要なのは、.cssセレクターは、最初に見つかった一致でのみ機能するということでした。これは、私に適合を与えていたものです。これが私が思いついたものです、私は改善が欲しいです！

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

tl; dr：セレクターを2つに分割し、each（）関数を使用して、必要なすべてのアイテムを調べて検索し、URLを抽出して配列にプッシュする必要がありました。配列を取得した後、以前のスタックオーバーフローの回答で残りの方法がわかりました。

4

2 に答える 2

4

リンクhttp://thinkpixellab.com/pxloader/

このライブラリは実際に画像をプリロードします。

//core file
<script type="text/javascript" src="js/PxLoader.js"></script>

// Create the loader and queue our 3 images. Images will not 
// begin downloading until we tell the loader to start. 

var loader = new PxLoader(), 
backgroundImg = loader.addImage('images/headerbg.jpg'), 
treesImg = loader.addImage('images/trees.png'), 
ufoImg = loader.addImage('images/ufo.png'); 


// callback that will be run once images are ready 
loader.addCompletionListener(function() { 
var canvas = document.getElementById('sample1-canvas'), 
    ctx = canvas.getContext('2d'); 

ctx.drawImage(backgroundImg, 0, 0); 
ctx.drawImage(treesImg, 0, 104); 
ctx.drawImage(ufoImg, 360, 50); 
}); 



// begin downloading images 
 loader.start();
于 2012-06-19T05:12:37.443 に答える
2

Preloading jquery imagesとjQuery Quick Tip: Extract CSS Background Imageの助けを借りて答えを見つけました

重要なのは、.css セレクターが最初に見つかった一致に対してのみ機能することでした。これが私が思いついたものです、私は改善したいと思っています！

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

tl;dr: セレクターを 2 つに分割し、each() 関数を使用して必要なすべてのアイテムを探し、URL を抽出して配列にプッシュする必要がありました。配列を取得した後、以前のスタックオーバーフローの回答で残りの道がわかりました。

于 2013-02-08T04:39:56.967 に答える