- ベストアンサー
ホームページの部分的な遅延読み込について
ホームページで利用しているブログパーツが重たく、読み込みがもたついて困っています。 しかし、外したくないパーツなのですべて読み込んでから遅延という形で読み込んで解決できないかと検討してます。 しかし、AJAXなどを使えばできそうですが、私はAJAXを知りませんし、敷居の高さを感じてしまいます。 たとえばprototype.jsやScript.aculo.usなどを利用するなど、手軽に実現するには何か良い方法はございませんでしょうか？ ご教授お願い致します。
- ssmx
- お礼率86% (95/110)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- neko-ten
- ベストアンサー率55% (1287/2335)
Ajax自体はPrototypeのAjax.Requestで実現できます。 概念はブラウザでHTTPアクセスするのとは別にJavaScriptでHTTPアクセスをして、応答をJavaScriptで受け取って処理をするってなるので、思ったよりも難しくないです。 ただ、ブラウザの制限で他ドメインに対してリクエストができないので、もしAjax使うならサーバ側にラッパーかませないといけないですね・・・。 アフェリエイトパーツによってはAjax想定していて、そのためのコードを準備しているところもあると聞きます。 APIとしてはじめからあるところ（Googleとか）もあるので、一度問い合わせして見たほうがいいかもしれないです。
お礼
ありがとうございます。 非常にわかりやすい説明です！ 概念はわかりました。 ラッパーっていうのはつまり、外部からは直接引っ張り出せないから、PHPなりで自分のサーバーの内容のように見せろということですね？ いや～いずれにしても０(ゼロ)からやろうと思っていたので大変そう(汗 APIも概念はわかりますが触れたことがありません(笑 なにか、入門者に参考になるコードなどはございませんでしょうか？ 対象のパーツは以下です。 http://vote.nifty.com/ http://www.issue.com/ とくに下がとてつもなく重いのです。
補足
http://bizcaz.com/archives/2009/01/20-230717.php こんなページを見つけました。 私なりに咀嚼するのに時間がかかりそうですが、ラッパーせずに実現しているようですね！ しかし、う～ん。 基礎から学ばなきゃ手軽には無理なんですかね。
- askaaska
- ベストアンサー率35% (1455/4149)
そのブログツールがどんなコードなのかわからないので 曖昧な回答になって申し訳ないわ。 onload後に取りに行くようにしたりすれば できるかもしれないわね。 そのブログツールの作者さんや そのブログツール利用者さんなら いいアイデア持っているかもね。
お礼
ありがとうございます。 そうなんですよね、onload後っていうのはわかったんですけど、その実現に敷居の高さを感じてしまって... http://labs.unoh.net/2008/01/lazy-loading-of-images.html 必ずこのページに行き着くのですが、敷居がぁ...理屈はわかるんですけどJSはまだ超入門者なもので...
関連するQ&A
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- スクリプト同士がケンカ？
初めまして。 HTML CSSを若干触れるものです。 サイトを制作していまして、 一部にlightboxをスクリプトタグで表示させていたのですが 新たに違うスクリプトタグ（トップ画像の上を画像がふらふら動くイメージのため） によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。 こちらがjugemで用意されたlightboxタグです。 <script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script> <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script> ここからが後から入れたタグです。 <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> これらは一緒に効果を出す事は可能でしょうか？ よろしくお願い致します。
- ベストアンサー
- HTML
- このDOCTYPEは、何なんでしょう？古いホームページなんですが、すこ
このDOCTYPEは、何なんでしょう？古いホームページなんですが、すこし書き直しするはめに、なってしまいました。ひょっとして、 sitebuilderというソフトで作ったんでしょうか？ 作り直しは、このソフトが必要なんでしょうか？javascriptは、DOCTYPEは、必要ないのでしょうか？アドバイスよろしくお願いします。ホームページ作りは、初心者なので。 <!--$sitebuilder version="2.6" extra="Java(1.6.0_05)" md5="eb9cab02b627b26866ac3c3d994a983c"$--> <!--$templateKey Blank||1.0.0$--> <html> <head> </html> <!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1274894357" alt="setstats" border="0" width="1" height="1"></noscript>
- ベストアンサー
- JavaScript
- AJAXでformから値を飛ばす
AJAXを勉強してます。 formから値を飛ばす事はできたのですが、 直リンクというのはできないのでしょうか？ uri ="http://www.○○○.cgi";の部分に直のアドレスを入れたいのですが、教えていただけないでしょうか？ よろしくお願いいたします。 <script src="prototype.js"></script> <script> function dosubmit( ) { uri ="http://www.○○○.cgi"; new Ajax.Updater( 'result', 'uri', { method: 'post', parameters: $('myform').serialize() } ); $('myform').reset(); } </script>
- 締切済み
- JavaScript
- PHPで変化した部分にibox効果
Ajaxを使った画像データベースの検索システムを開発しています。 prototype.jsを使ってプルダウンメニューを設置したHTMLにJavaScriptの使用でPHPよりデータベース検索を行っています。 検索結果にはサムネイル画像とタイトルが含まれます。このサムネイル画像をクリックすることで ibox.jsの効果を発動させて元サイズ画像をスライド表示させたいのですが、うまくいきません。 ｈｔｍｌ中にスクリプト宣言をしても、PHPの検索結果によってHTML自体が変化するわけでもなく、 かと言って、PHP中にスクリプト宣言しても効果が表れることもなく。 必要であれば、ソースもあげますので、お力添えをお願いします。
- ベストアンサー
- AJAX
- AJAXでformから値を飛ばす
困り度： すぐに回答を！ AJAXを勉強してます。 formから値を飛ばす事はできたのですが、 直リンクというのはできないのでしょうか？ uri = 'http://www.○○○.cgi' ;の部分に直のアドレスを入れたいのですが、教えていただけないでしょうか？ よろしくお願いいたします。 <script src="prototype.js"></script> <script> function dosubmit( ) { uri ='http://www.○○○.cgi'; new Ajax.Updater( 'result', 'uri', { method: 'post', parameters: $('myform').serialize() } ); $('myform').reset(); } </script>
- 締切済み
- AJAX
- Javascript外部ファイルの読み込みについて（ブラウザにキャッシュさせたい）
現在、製作中のサイトにおいて、webページが表示されるまで、5秒～15秒程度かかる事態が発生しています。 該当サイトでは、prototype.js等のjavascriptのライブラリを使用しており、合計で5個のjsファイルを読み込んでいます。 jsファイルの読み込み箇所を削除するとサクサクと快適になるので、jsファイルの読み込みに問題があると考え、jsファイルを圧縮したり（http://dean.edwards.name/packer/等）、ブラウザにキャッシュさせるために<script src=""での読み込み時に引数「?version=1」を追加してみたりしていますが、あまり改善しません。 読み込みの数を減らすため、prototype.jsとjquery.jsを統合するなども試してみました。（統合後のサイズは116KB） 利用環境によってはそれほど気にならない速度なのですが、IE6の環境でかなり重い場合がありますので、改善方法を探しています。 一回目の表示はともかく、2回目以降も毎回トップページ表示に5秒以上かかるのは問題がありますので…。 現時点で原因は、外部jsファイルがキャッシュされず毎回サーバーに読みにいっているために遅くなっていると思うのですが…。 ブラウザに外部ファイルをキャッシュさせる方法は何かないのでしょうか？ ちなみに、重くなる環境で、他のサイト（外部JSファイル読み込み多数）のサイトを表示しても、2回目以降は重くなりません。ブラウザのキャッシュの削除も一度試しています。 参考に、現在のスクリプト呼び出し部分を記述します。 ---------------------ソースここから--------------------------- <script type='text/javascript' src='js/prototype-1602-and_jquery.js?version=1'></script> <script type='text/javascript' src='js/js.js?version=1'></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js?version=1"></script> <script type='text/javascript' src='js/scriptaculous-js-181/src/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js?version=1'></script> ---------------------ソースここまで--------------------------- また、スクリプトはPHPで作っていますので、キャッシュを許可する記述を以下のようにしています。 ---------------------ソースここから--------------------------- session_cache_limiter('private_no_expire'); session_start(); ---------------------ソースここまで--------------------------- また、現状ではjsファイルの読み込みが原因かと考えていますが、それ以外でも改善点などがあれば、それをご指摘頂ければありがたいです。 宜しくお願い致します。 確認環境：windows XP、 IE6 HP作成スクリプト：PHP
- ベストアンサー
- JavaScript
- JavaScriptで擬似フレーム、読み込み完了を知るには？
サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。 参考：AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考：階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。 ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、 方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。 すいませんがアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- JpGaph + Ajaxでグラフを疑似ウィンドウで表示したい
最近Ajaxを始めました。 PHP jpgraphで作成したグラフを、Ajaxで疑似ウィンドウ的に表示したいです。 graph.phpで生成したグラフを<div="graph"></div>に 埋め込む感じで、下記のようなスクリプトを書いてみました。 しかし当然バイナリデータなので、期待するような形で表示されてくれません。 どうしたらいいのか皆目検討がつかず、困っています。 ご存じの方、どうぞよろしくお願いいたします。 <html> <head> <script src="../../js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> function showGraph(){ uri = "graph.php"; options = {onComplete: function(req){$("graph").innerHTML=req.responseText;}}; new Ajax.Request(uri, options); } </script> </head> <body> <input type="button" value="click" onClick="showGraph()"> <div id="graph"></div> </body> </html>
- ベストアンサー
- PHP
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
お礼
すみません、回答が遅くなりました。m（＿"＿）m お恥ずかしいですが、結構ハードルが高くて基礎力がついていかないようです。 理論は分かるけど、形にするということは難しく... そこで、このスレッド(?)は一旦終了させていただき、今回教えていただいたことをキーワードに学んで実現して行こうと思います。 また、質問や形になりましたら報告させていただきます。 ご丁寧にありがとうございました、出直してきます。