0
<head>
<script>
function yHandler(){
// Watch video for line by line explanation of the code
// http://www.youtube.com/watch?v=eziREnZPml4
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
var flag=0;
if(y >= contentHeight){
$(function() {
var count=0;
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url:myurl,
success: function(data) {
//var nexturl=data.pagination.next_url;
//alert(data.pagination.next_url);
for (var i = 0; i <5; i++) {
wrap.innerHTML += '<div class="newData"><img src="'+data.data[i].images.low_resolution.url+'"/></div>';
count++;
//if(data.pagination.next_url="") flag++;
// alert(count);
if(count>4){
myurl=data.pagination.next_url;
//alert(myurl);
count=0;
}
// alert(data.data[i].images.low_resolution.url);
}
}
});
});
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}
var myurl="https://api.instagram.comxxxxxxxxxx";
window.onscroll = yHandler;
</script>
</script>
<style type="text/css">
div#status{position:fixed; font-size:24px;}
div#wrap{width:800px; margin:0px auto;}
div.newData{height:1000px; background:#09F; margin:10px 0px;}
</style>
</head>
<body>
<div id="status">0 | 0</div>
<div id="wrap"><img src="abc.jpg" height="1000" /></div>
<div id="pics"></div>
</body>
このコードはgoogle chromeで完全に機能し、ユーザーがページの一番下をクリックすると新しい画像が読み込まれます。しかし問題は、たとえユーザーがページの一番下にいなくても、それがyhandlerを呼び出すので、Firefoxで動作していないということです。何か案は。カスタムスクロールエフェクトはSafariとFirefixでは機能しませんが、クロムで完璧に動作していますか?
あなたは正確に私はこのコードを置くべきラインで私を伝えることができますか? –
"window.onscroll = yHandler;"の代わりに、上記を使用する必要があります。また、$(function(){// bind code here})の中にインクルードしてください。 – Pandiarajan
これは役に立ちましたか? – Pandiarajan