3

基本的にフォームの要素を読み取り、画像をレンダリングする画像サーバーに渡される URL 文字列を作成する非常に単純な js (まだ学習中) があります。 

var imgURL = "site.com/path/to/image";
var product = "BirthdayCard_End" + "?&";
var page = 2;
var format;
var data;

function setPage(inputID)
    {
        page = inputID;
        setJPG();
    }

function FormValues()
    {
        var str = '';
        var elem = document.getElementById('form1').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "$" + elem[i].id + "=" + elem[i].value + "&";
        }
        data = str;         
    }

function genPDF()
    {
        var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1";
        fullURL = imgURL + product + data + format;
        window.open(fullURL);       

    }

function setJPG()
    {
        FormValues();
        var format = "imageRes=200&fmt=jpg&wid=550&page=" + page;
        fullURL = imgURL + product + data + format;
        document.getElementById('lblValues').innerHTML = fullURL;
        document.getElementById('image').src = fullURL;
    }

このような単純なローダーを表示する方法を見つけようとしています ( http://fgnass.github.com/spin.js/#v1.2.5 )。setJPG() 関数に何かを追加して、初期化されるたびにローダーをポップアップし、画像が読み込まれると消えるようにするにはどうすればよいですか?

4

6 に答える 6

2

最も簡単な方法は、2 つの div を重ねて作成することです。1 つの div で div をコンテンツで覆い、ページの読み込みが終了すると、その上にコンテンツを含む div が表示されます。

この例では、window.load で使用しているため、画像の読み込み時にイベントを変更する必要がある場合があります。残りは正常に動作するはずです。

CSS:

#preloader {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
opacity:0.3;
z-index:2;
}
#spinner_container {
position:absolute;
width:100%;
top: 50%;
left:0px;
height:1px;
overflow:visible;
opacity: 1;
background: transparent;
}
#spinner {
width: 31px;
height:31px;
margin-left:-15px;
position:absolute;
top:-15px;
left:50%;
display:block;
}

HTML

<div id="preloader">
<div id="spinner_container">
<img id="spinner" src="/content/images/spinner_squares_circle.gif" alt="" />
</div>
</div>
<div id="wrapper">
content
</div>

jQuery

$(window).load(function(){

    $('#preloader').fadeOut(100, function() {
               $('body').css('overflow','auto');
               $(this).remove();
    });
});
于 2012-05-31T14:57:24.730 に答える
2

推奨される解決策

画像の場合、「読み込みスピナー」の使用には問題があります。下記参照。

スピナーの代わりに、まず画像の低解像度 (B&W も考慮) を送信します。This SO question はその方法を示しています。

画像読み込み用のスピナー

画像が表示されるのを待っている間にスピナーを表示する際の問題は、画像がロードされたときにブラウザが JS に確実に通知しないことです。

そして、それが発火しない場合は、スピナーを永遠に見たままになります...

jQuery load イベントのドキュメントを参照してください--

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

  • クロスブラウザーで一貫して確実に動作しない
  • 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。
  • DOM ツリーを正しくバブルアップしない
  • ブラウザのキャッシュに既に存在する画像の起動を停止することができます
于 2012-05-31T15:04:54.413 に答える
0

ここに画像の説明を入力

再利用できるように別のファイルにローダーコードを書きました

ファイル: Loader.js

export const elementString = {
    loader:'loader' // class name that I used in renderLoader function
}
export const renderLoader = parent =>{
    const loader = `
    <div class='${elementString.loader}'>
        <svg>
            <use href="img/icons.svg#icon-cw"></use>
        </svg>
    </div>
    `;
    parent.insertAdjacentHTML('afterbegin', loader);
};

export const clearLoader=()=>{
    const loader = document.querySelector(`.${elementString.loader}`);
    if(loader){
        loader.parentElement.removeChild(loader);
    }
}

ファイル: style.css

.loader {
  margin: 5rem auto;
  text-align: center; }
  .loader svg {
    height: 5.5rem;
    width: 5.5rem;
    fill: #F59A83;
    transform-origin: 44% 50%;
    animation: rotate 1.5s infinite linear; }

    @keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

ファイル：icons.svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cw" viewBox="0 0 20 20">
<title>cw</title>
<path d="M19.315 10h-2.372v-0.205c-0.108-4.434-3.724-7.996-8.169-7.996-4.515 0-8.174 3.672-8.174 8.201s3.659 8.199 8.174 8.199c1.898 0 3.645-0.65 5.033-1.738l-1.406-1.504c-1.016 0.748-2.27 1.193-3.627 1.193-3.386 0-6.131-2.754-6.131-6.15s2.745-6.15 6.131-6.15c3.317 0 6.018 2.643 6.125 5.945v0.205h-2.672l3.494 3.894 3.594-3.894z"></path>
</symbol>
</defs>
</svg>

ファイル: app.js

renderLoader(document.querySelector('.results'));// .results is the parent of my searchlist which I am shoing in the view
await state.search.getResults();
clearLoader();

ファイル: app.html

<body>
    <div class="container">
        <div class="results">
            <ul class="results__list">
            </ul>
        </div>
    </div>

</body>
于 2020-05-08T06:38:52.843 に答える
-3

グラフの div に回転する gif を追加するだけで、読み込まれたときに自動的に Google グラフに置き換えられます。このような、 ""

于 2016-08-15T19:30:53.830 に答える