下午全部。 我正在尝试实现上述目标并遵循上述指南,请参阅@ http://www.asif18.com/4/php/window-on-scroll-load-contents-in-php-mysql-using-jquery-bootstrap/
我在这里可以看到我创建的测试页面。 http://coolnique.com/products_autoscroll.php
似乎没有什么都不做。当我访问它时,'loadmore'页面没有错误,所以也许javascript无法正常工作?
这是我的js文件
$(document).ready(function(){
$(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
var WindowHeight = $(window).height(); /* get the window height */
if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
$("#loader").html("<img src='img/loading_icon.gif' alt='loading'/>"); /* displa the loading content */
var LastDiv = $(".project small:last"); /* get the last div of the dynamic content using ":last" */
var LastId = $(".project small:last").attr("id"); /* get the id of the last div */
var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */
$.ajax({ /* post the values using AJAX */
type: "POST",
url: "_loadmore.php",
data: ValueToPass,
cache: false,
success: function(html){
$("#loader").html("");
LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
}
});
}
});
});
这是我的加载更多文件...
<?php
//include location select
include'_locationselect.php';
// Connect to database
// HAVE REMOVE DATABASE VARIABLES FROM HERE
//Find last record
if(isset($_POST["lastid"]) && $_POST["lastid"] != "0"){
$lastid = $_POST["lastid"]; // save the posted value in a variable
$query="SELECT * FROM products WHERE product_price_$setLocation IS NOT NULL and product_id < '$lastid' Order By product_id DESC LIMIT 10";
$result=mysql_query($query) or die('Invalid query: ' .mysql_error());
// Store number of products as variable
$num=mysql_num_rows($result);
// Start loop to display products
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"product_name");
$f2=mysql_result($result,$i,"product_price_$setLocation");
$f3=mysql_result($result,$i,"product_link_$setLocation");
$f4=mysql_result($result,$i,"product_image");
// $f5=mysql_result($result,$i,"category_id");
// $f6=mysql_result($result,$i,"product_desc");
$f7=mysql_result($result,$i,"product_id");
$f1spacesremoved = str_replace(' ', '_', $f1);
if ($setLocation=="us")
{
$currencysymbol = "$";
}
else
{
$currencysymbol = "£";
};
//Write each product
//loop the text below
echo '<div class="project small" id="'.$f7.'">
<div class="inside">
<a href="/product/' .rawurlencode($f1spacesremoved). '/' .$f7. '">
<img width="300" height="175" src="/img/products/'.$f4.'" class="thumb wp-post-image" />
<span class="title"><span>'.$f1.'</span><span>'.$currencysymbol.' '.$f2.'</span></span>
</a>
</div> </div>
';
// Repeat loop until finished
$i++;
}
}
?>
然后在我的主页面上有一些代码应该加载
$query="SELECT * FROM products WHERE product_price_$setLocation IS NOT NULL Order By product_id DESC LIMIT 20";
$result=mysql_query($query) or die('Invalid query: ' .mysql_error());
// Store number of products as variable
$num=mysql_num_rows($result);
// Start loop to display products
$i=0;
while ($i < $num) {
$f1=mysql_result($result,$i,"product_name");
$f2=mysql_result($result,$i,"product_price_$setLocation");
$f3=mysql_result($result,$i,"product_link_$setLocation");
$f4=mysql_result($result,$i,"product_image");
// $f5=mysql_result($result,$i,"category_id");
// $f6=mysql_result($result,$i,"product_desc");
$f7=mysql_result($result,$i,"product_id");
$f1spacesremoved = str_replace(' ', '_', $f1);
if ($setLocation=="us")
{
$currencysymbol = "$";
}
else
{
$currencysymbol = "£";
};
//Write each product
//loop the text below
echo '<div class="project small" id="'.$f7.'">
<div class="inside">
<a href="/product/' .rawurlencode($f1spacesremoved). '/' .$f7. '">
<img width="300" height="175" src="/img/products/'.$f4.'" class="thumb wp-post-image" />
<span class="title"><span>'.$f1.'</span><span>'.$currencysymbol.' '.$f2.'</span></span>
</a>
</div> </div>
';
// Repeat loop until finished
$i++;
}
?>
<div id="loader"></div>
<div id="divResult"></div> <!-- here the rest of contents will display dynamically -->
</div>
</div>
</div>
</div>
</div>
任何指针都会有很大的帮助,因为我似乎无法让这件事发挥作用!我是PHP的新手!
答案 0 :(得分:0)
答案 1 :(得分:0)
$(window).scroll(function () {
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
//do your stuff here
}
});
我遵循了这种方法。试试吧。