Wordpress懒惰加载
[英]Wordpress Lazy Loading
问题描述
你好我通过分页在WordPress中实现延迟加载它运行正常但是当我向下滚动时重复数据，例如，如果预期的结果只有4个帖子而且我向下滚动它不断重复这4个帖子这里是我的javascript代码
<script>
$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var urlString = window.location.href;
var url = new URL( urlString );
var offer = url.searchParams.get("offer");
var purpose = url.searchParams.get("purpose");
jQuery(function($){
$('.property-listings').append( '<span class="load-more"></span>' );
var button = $('.property-listings .load-more'),
page = 2,
loading = false,
scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400
};
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if ( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout( scrollHandling.reallow,scrollHandling.delay );
var offset = $(button).offset().top - $(window).scrollTop();
if ( 2000 > offset ) {
loading = true;
$('.loader-wrap').css({display: 'flex'});
var data = {
'action': 'load_posts_by_ajax',
'page': page,
};
if ( offer ) {
data.offer = offer;
}
if ( purpose ) {
data.purpose = purpose;
}
// console.log(data);
$.post($ajaxurl, data, function(response) {
if( response.data != "" ) {
$('.property-listings .content-wrap').append(response.data);
$('.property-listings').append( button );
page++;
$('.loader-wrap').css({display: 'none'});
loading = false;
}else{
$('.loader-wrap').css({display: 'none'});
scrollHandling.allow = false;
}
});
}
}
});
});
有没有办法告诉它停止，如果它找到另一张具有相同名称的卡，例如
这里也是WordPress代码
<?php
/**
* The template for displaying find properties page.
*
* This is the template that displays only find-properties page.
*
* @package WAKEB
*/
get_header();
if (!empty($_GET['region'])){
$args =array(
'post_type' => 'project',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'regions',
'field' => 'id',
'terms' => $_GET['region'],
),
),
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$projectsid[] = get_the_ID();
}
}else{
$projectsid=array(0);
}
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array (
'post_type' => 'unit',
'posts_per_page' => 4,
'paged' => 1,
);
if (!empty($_GET['ctype'])){
$args['tax_query'] = array (
array(
'taxonomy' => 'ctypes',
'terms' => $_GET['ctype'],
),
);
}
if (!empty($_GET['ptype'])){
$args['tax_query'] = array (
array(
'taxonomy' => 'uptypes',
'terms' => $_GET['ptype'],
),
);
}
if (!empty($_GET['pro'])){
$args['meta_key'] = 'WAKEB_project';
$args['meta_value'] = $_GET['pro'];
}
if(!empty($_GET['k'])){
$args['s'] = $_GET['k'];
}
if(isset($projectsid)){
$args['meta_query'][] = array(
'key' => 'WAKEB_project',
'value' => $projectsid,
'compare' => 'IN',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['area1']) && !empty($_GET['area2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => array($_GET['area1'], $_GET['area2']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['area1'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => $_GET['area1'],
'compare' => '>=',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['area2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_unitarea',
'value' => $_GET['area2'],
'compare' => '<=',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['price1']) && !empty($_GET['price2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => array($_GET['price1'], $_GET['price2']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['price1'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => $_GET['price1'],
'compare' => '>=',
'type' => 'NUMERIC',
);
}elseif(!empty($_GET['price2'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_price',
'value' => $_GET['price2'],
'compare' => '<=',
'type' => 'NUMERIC',
);
}
if(!empty($_GET['purpose'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_vacation',
'value' => '1',
'compare' => '=',
);
}
if(!empty($_GET['offer'])){
$args['meta_query'][] = array(
'key' => 'WAKEB_hot',
'value' => '1',
'compare' => '=',
);
}
?>
<div class="fixed-search">
<form method="get" action="<?php bloginfo('wpurl'); ?>/find-properties/" name="find-units">
<div class="content-wrap">
<div class="form-group">
<div class="form-field">
<input type="search" placeholder="<?php _e('Search', 'WAKEB'); ?>" name="k" id="k">
</div>
<div class="form-field">
<div id="toggle-ctype" class="filter"><?php _e('Filter by contract type', 'WAKEB'); ?></div>
<div class="dropdwon" id="ctype-select">
<?php
$ctype_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
);
$Contract_types = get_terms('ctypes', $ctype_args);
foreach ($Contract_types as $ctype){
if ( !get_field( 'hide', 'ctypes_'. $ctype->term_id ) ) :
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="ctype[]" value="'.$ctype->term_id.'"><span class="checkmark"></span>'.$ctype->name.'</label>';
echo '</div>';
endif;
}
?>
</div>
</div>
<div class="form-field">
<div id="toggle-ptype" class="filter"><?php _e('Filter by purpose type', 'WAKEB'); ?></div>
<div class="dropdwon" id="ptype-select">
<?php
$ptype_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
);
$Purpose_types = get_terms('uptypes', $ptype_args);
foreach ($Purpose_types as $ptype){
if ( !get_field( 'hide', 'uptypes_'. $ptype->term_id ) ) :
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="ptype[]" value="'.$ptype->term_id.'"><span class="checkmark"></span>'.$ptype->name.'</label>';
echo '</div>';
endif;
}
?>
</div>
</div>
<div class="form-field">
<div id="toggle-proj" class="filter"><?php _e('Filter by compound', 'WAKEB'); ?></div>
<div class="dropdwon" id="proj-select">
<?php
$pro_args = array ('post_type' => 'project', 'posts_per_page' => -1,);
$query = new WP_Query( $pro_args );
if($query->have_posts()){
while($query->have_posts()){
$query->the_post();
echo '<div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="pro[]" value="'.get_the_ID().'"><span class="checkmark"></span>';
$name = rwmb_meta('WAKEB_card_name');
if ( $name ) { echo $name; }else{ the_title(); }
echo '</label>';
echo '</div>';
}
}
?>
</div>
</div>
</div>
<div class="form-group">
<div class="form-field">
<div id="toggle-regions" class="filter"><?php _e('Filter by region', 'WAKEB'); ?></div>
<div class="dropdwon" id="regions-select">
<?php
echo '<ul>';
draw_tree_for_regions(0);
function draw_tree_for_regions($p_id){
$reg_args = array (
'orderby' => 'menu_order',
'hide_empty' => false,
'parent' => $p_id,
);
$allregions = get_terms('regions', $reg_args);
foreach ($allregions as $region){
if ( !get_field( 'hide', 'regions_'. $region->term_id ) ) :
echo '<li><div class="checkbox">';
echo '<label class="item"><input type="checkbox" name="region[]" value="'.$region->term_id.'"><span class="checkmark"></span>'.$region->name.'</label>';
echo '</div>';
$children=get_term_children($region->term_id, 'regions');
if($children){
echo '<ul>';
draw_tree_for_regions($region->term_id);
echo '</ul>';
}
echo '</li>';
endif;
}
}
echo '</ul>';
?>
</div>
</div>
<div class="form-field">
<div id="toggle-area" class="filter"><?php _e('Filter by Area', 'WAKEB'); ?></div>
<div class="dropdwon" id="area-select">
<div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="area1" id="area1" > </div>
<div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="area2" id="area2" ></div>
</div>
</div>
<div class="form-field">
<div id="toggle-price" class="filter"><?php _e('Filter by Price', 'WAKEB'); ?></div>
<div class="dropdwon" id="price-select">
<div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="price1" id="price1" > </div>
<div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="price2" id="price2" > </div>
</div>
</div>
<div class="form-field">
<button type="submit"><?php _e( 'Search', 'WAKEB' ); ?></button>
</div>
</div>
</div>
</form>
</div>
<section class="content-search-result page-section">
<div class="section-title"><h2><?php _e('AVAILABLE UNITS', 'WAKEB'); ?></h2></div>
<ul class="unit-terms">
<div class="content-wrap">
<?php
$tax_args = array( 'taxonomy' => 'utypes', 'hide_empty' => false );
$ptypes = get_terms( $tax_args );
foreach ( $ptypes as $ptype ) {
echo '<li><a href="'. get_term_link( $ptype->term_id ) .'">'. $ptype->name .'</a></li>';
}
?>
</div>
</ul>
<?php
$query = new WP_Query( $args );
if($query->have_posts()){ ?>
<ul class="property-listings">
<div class="content-wrap">
<?php
while ( $query->have_posts() ) : $query->the_post();
get_template_part("template-parts/units");
endwhile;
?>
</div>
</ul>
<?php echo '<div class="loader-wrap"><div class="lds-facebook"><div></div><div></div><div></div></div></div>';
}else{
echo '<div class="no-result">'. _e( 'No results found...', 'WAKEB' ) .'</div>';
}
?>
</section>
这是一个完整工作的WordPress仓库的链接（使用PHP 5.6） https://github.com/Ov3rControl/hoomerz
它重复了如下所示的数据，它仍然从我正在搜索的内容中加载不相关的数据，例如，如果我在埃及搜索公寓它从埃及获得所有公寓然后重复它们那么当我滚动时我仍然得到数据但是来自无关的地方比如美国
这是一个问题的实时链接http://beta.hoomerz.com/find-properties/?k=®ion%5B%5D=218&area1=&area2=&price1=&price2=搜索应该只是第一个帖子而且应该是不加载任何其他无关紧要的数据
1 个解决方案
解决方案1
0 2019-06-24 11:43:51
您是从PHP输出上面的脚本代码吗？ 你有这条线：
$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
除非您上面显示的整个脚本位于php文件中，并且是echo（）或print（）语句的一部分，否则它将无效。 使用wp_localize_script（）在HTML中安全正确地输出admin_url（'amin-ajax.php'）的值，然后使用JavaScript从DOM获取值并根据需要使用它。
除此之外，你的AJAX调用使用$ .post，但你的PHP正在检查$ _GET。 选择一个方法并使用它 - 在这种情况下，$ _GET更合适。
延迟加载不适用于图像 slider 插件（WordPress、PHP、JavaScript）
[英]Lazy-Loading not working on image slider plugin (WordPress, PHP, JavaScript)
如何在不滚动的情况下强制/触发 Wordpress 原生延迟加载图像的加载？
[英]How to force/trigger the load of Wordpress native lazy loading images without scrolling?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.