大きな画像を読み込んでいるときに画像を読み込む方法を教えてください。大きいイメージがロードされているときにイメージをロードする方法を教えてください。
ユーザーフォトアルバムで写真を表示する際のOrkutの例として、写真が完全に読み込まれるまで写真の上に表示される画像があります。
私はその機能を実装する必要があります。
私の質問はどのようにその機能を実装するのですか？ JQueryを使用せずに使用できますか？
助けてください。
はあなたが
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById('test').src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
div（または任意のもの）にイメージをラップし、背景イメージをアニメーションGIFまたは任意のローディングイメージに設定します。画像の読み込みが終了すると、背景画像が覆い隠されます。簡単で、どこでも好きな場所で再利用できます。
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS：
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
ラッパー「div」は必要ありません。画像に背景を適用することができます。また、画像が透明な場合は、ローディング画像が下に表示されます –
asp.net ajaxまたは単純なjavascript nto JQueryを使用する他の方法はありません。助けてください。あなたの返事のためのタク。 – Himadri
@Himadri - どうしてもっと複雑にしたいのですか？ – Skilldrick
あなたはjQuery Lazy Loading pluginを使用することができます。読み込みイメージを指定し、大きなイメージの読み込みをビューにスクロールされるまで遅らせることができます。
JQueryの代わりにasp.net ajaxまたはjavascriptを使用して他の方法がありますか？ 投稿していただきありがとうございます。 – Himadri
編集：明らかに、これは推奨されていません。ここには何も見ないでください。
これにはJavaScriptまたはCSSは必要ありません。 img要素には、lowsrcプロパティが組み込まれていますが、まれにしか聞こえません。
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
基本的な考え方は、通常の画像の非常に圧縮された、おそらく黒と白のバージョンを追加作成することです。最初に読み込まれ、フル解像度の画像がダウンロードされると、ブラウザは自動的にそれを置き換えます。最高の部分は、何もする必要がないということです。
ここでそれをチェックアウト：http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.htmlここ
私はこれ以上のupvotesを与えることができたらいいと思います。 – eyelidlessness
私はこの前に 'lowsrc'プロパティについて聞いたことがないので、私はこの答えに魅了されました。私はGoogle検索を行い、これを見つけました：http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx 'lowsrc'は廃止予定ですしばらく。私が 'lowsrc'のために見つけた唯一のソース/ページは非常に古いものです。私はまた、テストするためにページのいずれかを使用することができませんでした（そして、実際にはlowsrcを見ています）。多分私の接続が速すぎます。 – Jim
私はオンラインで検索しているので、このプロパティはjavascriptを使用してハッキングされているようです。 http://validator.w3.org/を介して画像lowsrc属性のhtmlソースを実行すると、 'lowsrc'が有効な属性ではないことが示されます。 – Jim
時間前、私は同様の問題のために、このようなものを作って、より精巧なものを行うためにすると拡張することができ、基本的なテクニックです：
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
このアプローチには、いくつかの有用な利点があると思います。
賞金の価値があると確信して答えます。作品＆よく説明しました。 – matm