我已经阅读了关于无限滚动的多个示例,但我发现很难将其实现到我的代码中。这是代码,从MySQL数据库中显示数据:
<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php
$result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
while ($row = mysql_fetch_array($result))
{
extract($row);
$link=$row["linkas"];
echo "<div class='col-md-4'>";
$sites_html = file_get_contents($link);
$html = new DOMDocument();
@$html->loadHTML($sites_html);
$meta_og_img = null;
//Get all meta tags and loop through them.
foreach($html->getElementsByTagName('meta') as $meta) {
//If the property attribute of the meta tag is og:image
if($meta->getAttribute('property')=='og:image'){
//Assign the value from content attribute to $meta_og_img
$meta_og_img = $meta->getAttribute('content');
}
}
list($width, $height) = getimagesize($meta_og_img);
$skaicius = abs($width - $height);
if($width > $height) {
echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
}
else if($width < $height) {
if($skaicius < 100){
echo "<img src=\"$meta_og_img\" style='width:234px'
onclick='window.open(\"$link\", \"_blank\");'>";
}
else {
echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
onclick='window.open(\"$link\", \"_blank\");'>";
}
}
echo "</div>";
}
?>
存储在数据库中的是指向例如互联网商店页面的链接。代码的作用是从db中存储的链接获取facebook预览图像,该链接标记为og:image,然后将其定位到中心。问题是页面试图加载每个图像,并且需要花费大量时间来加载页面,这就是为什么我想以某种方式使其成为滚动页面上的加载。顺便说一句,我在这里使用Bootstrap的网格系统。我希望你能帮助我。附:如果你因为我的英语不好而得不到我的意思,请问我,我会试着更清楚地回答它