2017-07-19 8 views
1

ページあたりいくつかの小さな画像(約24枚)があるセクションがあるWebサイトがあります。私がページにアクセスすると、ページが拡大されているのを見ることができます。関連するイメージの前にテキストが表示されます。これは私の問題ではありません。ページが完全に読み込まれる前に問題は、今日、人々は美しさを達成するためにこの原理に反して戦っており、完全にロードされるまでページのセクションを隠すことは必要でない場合は一般的であるということです。私はこれを戦うことができない(もし私ができれば)。私が自分のウェブサイトをいくつかの開発者に見せても、私は彼が「古い原則」に賛成してこの美しさを完全に抱いていることがわかります。いくつかのサムネイル画像を含むページを読み込むテクニック(laravel 5.3)

"スマートイメージの読み込み"があるページをデザインしようとは決してできませんでした。どこから始めたらいいのかわからないので、ここにいるのです。あなたが私にいくつかのテクニック、プラグインなどをリストすることができれば、ページにプログレッシブ画像を読み込むことができます。

すべての画像を表示するだけでマイページが読み込まれます。私はスマートなイメージの読み込みを達成するために、コントローラーからjsonを返すことによって画像と関連テキストを取得しなければならないと思いますが、それは正しいのですか?もしそうなら、私は自分のシステムに大きな変更を加える必要があります。私は簡単に、ページ上のすべてのイメージをアニメーションGIFイメージに設定し、サーバーから(ajax/jsonを使用して)データをフェッチすると、イメージのsrc属性を置き換える手法を見ました。再び、最高のテクニックは何ですか?あなたは、ページが完全にロードする前にロードアニメーションを表示するには、jQueryとCSSを使用することができます

+0

あなたのクエスト情報を 'html'、' css'、 'javascript'で再捕えたいかもしれません。 Laravelとvuejsを使用している場合は、vuejsの機能を使用して、画像がロードされた後で条件付きでレンダリングすることを検討できます。 – haakym

+0

画像がまだ読み込まれている間に画像が拡大されるのを止める方法については、adam wathanの方法を参照してください:https://youtu.be/ktj_GR1LvFw?t=588 – haakym

答えて

0

チュートリアル:http://smallenvelop.com/display-loading-icon-page-loads-completely/

の作業例:http://smallenvelop.com/demo/simple-pre-loader/

ロードアニメーション使用

ビッグ当社のウェブサイト:https://club.ubisoft.com/

ちょうど警告:この技術を使用するウェブサイトはより遅く見えます、ユーザーはページが読み込まれる前にウェブサイトを離れることさえあります、私は個人的に考えるテキストを最初に表示するデフォルトの動作は、依然として最高です。

関連する問題