2

我基本上是在尝试在一个流行的图书网站中延迟加载 div 的内容。
到目前为止我所做的是：

  1. 使用 simple_html_dom.php 解析器抓取所需内容并显示在 php 文件中
  2. 使用 simpleXml 创建用于存储抓取数据（标题、作者、img）的 xml 文件（也通过在 html 页面上显示来测试内容）

xml树生成

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.amazon.in/gp/bestsellers/books/1318209031/ref=zg_bs_nav_b_2_1318203031";
$html = new simple_html_dom();
$html->load_file($target_url);

$xml = "<BOOKLIST>";
foreach($html->find('div[class=zg_itemWrapper]') as $post)
{
 $xml .= "<BOOK>";
 foreach($post->find('div[class=zg_itemImageImmersion] img') as $image)
 $xml .= "<IMAGE>".$image->src."</IMAGE>";
  foreach($post->find('div[class=zg_title] a') as $title)
  {
   $xml .= "<TITLE>".$title->href."</TITLE>";
   $xml .= "<TITLENAME>".$title->innertext."</TITLENAME>";
  }
 foreach($post->find('div[class=zg_byline]') as $author)
 $xml .= "<AUTHOR>".$author->plaintext."</AUTHOR>";

/*  I don't know why but the parser doesn't seem to generate 'price' tag
foreach($post->find('strong[class=price]') as $price)
 $xml .= "<price>".$price->text."</price>";
*/
 $xml .= "</BOOK>";
}
$xml .= "</BOOKLIST>";
$sxe = new SimpleXMLElement($xml);
$sxe->asXML("test.xml");
?>

使用 simpleXml 从 xml 树显示内容的 html 文件如下：

<html>
<body>
<script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","test.xml",true);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;

document.write("<div class='container' id='result'>");
var x=xmlDoc.getElementsByTagName("BOOK");
for (i=0;i<x.length;i++)
{
 document.write("<div class='span3' id='lazy'>");
 document.write("<div class='span2'>");
 document.write("<img src="+x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue+"></img>");
 document.write("</div>");
 document.write("<div class='span2'>");
 document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
 document.write("</div>");
 document.write("<div class='span3' style='padding:0;margin-left:20px;height:auto'>");
 document.write("<a href="+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+">"+x[i].getElementsByTagName("TITLENAME")[0].childNodes[0].nodeValue+"</a>");
 document.write("</div>");
 document.write("</div>");
}
document.write("</div>");
</script>
</body>

<script>
function reloadq()
{
 var position = $("#lazy").offset().top;      
 var scllwidth = $(window).scrollTop() + $(window).height();
 if ( scllwidth > position)
 {
   alert( "Time to Load Content! Ajax request goes here" );
 }
}
$(window).scroll( function() { reloadq() } )
</script>
</html>

当我滚动此页面时，警报（在稍后放置 ajax 的 jquery 脚本中）起作用。
我需要帮助的部分是如何使用 ajax 从 xml 文件中加载内容以进行延迟加载。
请提出解决方案，或者我哪里出错了。谢谢 ：）

4

1 回答 1

1

首先，你为什么不使用 Jquery 的 ajax 函数？http://api.jquery.com/jQuery.ajax/

无论如何，首先使用 ajax 响应数据发出警报（或使用您的浏览器开发人员工具/firebug 来查看响应）。成功检索数据后，将提醒 x 数组中的一条数据。一旦你有一个适当的循环数组，正在检索数据，就不必担心将它输出到屏幕上。

显然，为了帮助测试，您可以在页面加载时触发 ajax 查询，这样您就不必每次都滚动。

于 2013-08-14T14:34:39.650 回答