1

GoogleフォントAPIを使用しています。document.ready で、Google フォント コレクションを要求し、使用可能なすべてのフォント ファミリを選択リストに入力しました。ユーザーが選択リストから任意のフォントを選択すると、選択したフォントを要求してフォントプレビューを表示するリンクをドキュメントに追加するだけです。しかし、フォントがプレビュー用に読み込まれている間に、読み込み中の画像を表示しようとしています。私のコード:

    $("#ff").selectmenu({ select: function () {
        var img = $("<img />").attr("src", "/images/load.gif");
        $(".preview").append(img);
        $('body').append("<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=" + escape($(this).val()) + "' type='text/css' media='all' />");
        $(".preview").css({ fontFamily: $(this).val() });
        $(img).remove();
    }
    });

しかし、リンクタグがフォントを非同期的に要求している可能性があるため、読み込み中の画像は表示されません。フォントが完全に読み込まれるまで読み込み中の画像を表示するにはどうすればよいですか?

4

1 に答える 1

1

csuwldcatが別の投稿で提供した別の回答を次に示します。

javascript: LINK でロード イベントをキャプチャする

私の意見では、IMG タグとその onerror イベントを使用するこの問題のより良い解決策は次のとおりです。このメソッドは、ループ、ゆがんだスタイルの遵守、iframe でのファイルの読み込みなどを行わずにジョブを実行します。このソリューションは、ファイルが読み込まれたときに正しく起動し、ファイルが既にキャッシュされている場合はすぐに起動します (皮肉なことに、ほとんどの DOM よりも優れています)。 load イベントはキャッシュされたアセットを処理します)。この方法を説明する私のブログの投稿は次のとおりです - Back Alley Coder の投稿 - 正当な解決策がないことにうんざりしています。お楽しみください!

var loadCSS = function(url, callback){
var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;

document.getElementsByTagName('head')[0].appendChild(link);

var img = document.createElement('img');
    img.onerror = function(){
        if(callback) callback(link);
    }
    img.src = url;

}

彼の応答に投票して、彼が信用を得られるようにしてください。

于 2012-09-13T04:31:16.693 に答える