Soufang Home M Stationを開発する場合、Soufang Home Decoration rendering Album Display Effectには、写真を表示するためにPhotoswipeプラグインを使用する必要があります。
特徴：
1.家が提供するインターフェイスは、一度に1枚だけの写真を撮ることができます
2。装飾レンダリングの数は無制限です。
3. Photoswipeの使用から判断すると、Photoswipeが初期化される前にすべての写真をリストする必要があります。
instance = photoswipe.attach（window.document.queryselectorall（ '＃gallery a'）、options）;
タグAはPhotoswipeの初期化の前であり、ギャラリーに動的に追加することは無効です。
現在の解決策は、最初にインターフェイスを10回呼び出し、10枚の写真をリストすることです。これらの10枚の写真を表示した後、URLの次のページにジャンプして、次のグループに10個の写真を表示します。
このソリューションの利点は次のとおりです
1。達成しやすい。
短所も非常に明白です。
1.次のページにジャンプするたびに、ユーザーは長い間待ちます。 （インターフェイスの10倍は、現在の画像がクライアントにダウンロードされた時間 +その他の時間と呼ばれます）
2。写真が左右にスライドしている間、翌年の突然のページへのジャンプもユーザーエクスペリエンスに影響します。
Photoswipeを最適化して、ページやジャンプなしを達成する方法。
Photoswipeを使用した人なら誰でも、Photoswipe.eventTypes.ondisPlayImageを知っておく必要があります。このイベントは、画像が表示されるたびにトリガーされます。
instance.addeventhandler（photoswipe.eventtypes.ondisplayimage、function（e）{//ここでいくつかのコード関数を実装してください。}）;研究を通じて、表示される画像オブジェクトのコレクションにe.target.cache.imagesからアクセスできることがわかります。この考え方はより明確です - 「最初にプレースホルダーを十分に定義し、次に画像スライディングディスプレイ中にAjaxを介して画像のアドレスを1つずつ継続的に取得し、e.target.cache.images画像コレクションに対応する画像を割り当てます。」
次のコードは、このアイデア方法の実装です（このアイデアを説明することの利便性のために、追加の詳細は省略されています）
<ul id = "gallery" style = "display：none;"> <！ - 次の10は、インターフェイスから最初から得られた写真です - > <li> <a href = "viewimage/zxb/2014_06/30/86/pic/000711232400/800x800.jpg" href = "Viewimage/zxb/2014_04/18/31/94/pic/000664552500/800x800.jpg"> </a> </li> <li> <a href = "Viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"> </a> </li> <li> <a href = "Viewimage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"> </a> </li> <li> <a href = "Viewimage/zxb/2014_02/12/13/15/pic/007331476000/800x800.jpg"> </a> </li> <li> <a href = "Viewimage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"> </a> </li> <！ - プレースホルダーはタグ - > <li> <a href = "common_m/m_public/lil> href = "common_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/emages/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/emages/loading.gif"> href = "common_m/m_public/images/loading.gif"> </a> </li> <！ - 複数のプレースホルダーが必要に応じてタグを追加できます - > </ul>
Photoswipe.eventTypes.ondisPlayImageイベントを聞くことにより、e.target.cache.imagesを変更して、画像がダウンロードされる前にプレースホルダー画像のアドレスを修正します。
var aimgarrindex = 0; var picsetindex = 10; instance.addeventhandler（photoswipe.eventtypes.ondisplayimage、function（e）{var neeedetimg = e.target.cache.images [picsetindex ++]; $ .getjson（ "./ index.php？c = jiaju＆a = ajaxnextpicinfo＆picid = {picid parameter}"、function（data）{var url = data [0] ["img"] new image（）。src = url; $（needetimg.metadata.item）photoswipe.data（ 'comment'、 ''）の画像コレクション; //他の追加コンテンツをこの方法で設定}）}}）;index.php？c = jiaju＆a = ajaxnextpicinfo＆picid = {picid parameter}コンテンツを返します。さまざまなPicidsによると、写真の関連情報は毎回返されます。
コードコピーは次のとおりです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。