そこで、ロードしようとしている何千もの画像の効率を改善するために、jQuery の遅延ロード プラグインを実装しようとしてきました。
LazyLoad はここにあります: http://www.appelsiini.net/projects/lazyload
ただし、VS で自分のサンプルを実行しようとすると、Javascript エラーが発生し続けます...
Microsoft JScript ランタイム エラー: オブジェクトはプロパティまたはメソッド 'lazyload' をサポートしていません
Javascript ファイル:
$(function() {
$("img").lazyload({
effect : "fadeIn"
/*
,appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});
HTML ファイル:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js" type="text/javascript"></script>
<div id="container" style="width: 765px; overflow: scroll;">
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
<img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
</div>
私の大きな疑問は、なぜこの奇妙なエラーが発生し続けるのかということです。インターネット全体を検索して閲覧し、解決策を探しました。私が見つけた1つの答えは、遅延読み込みはもはやサポートされていないということですが、jQuery自体がlazyLoadingプラグインを更新し続けると、これはどうなるでしょうか. 2012年、彼らはそれをv1.8に更新しました。彼らのサンプル Web サイトはここで動作します: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html .... しかし、自分のコンピューターで実行すると動作しません。私は Internet Explorer で実行しています (Internet によると、Lazyload は IE で動作するとのことです)。
誰かがすぐに答えてくれることを願っています。前もって感謝します!
コンテキストのコード...
HTML:
window.onload = function () {//I tried putting lazyload here same error occurs};
$(document).ready(function () {
//I tried putting lazyload here same error occurs
});
$(function() {
$("img").lazyload({
effect : "fadeIn"
/*
,appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});