It can be done just following regular way to use Ajax in WordPress.
https://codex.wordpress.org/AJAX_in_Plugins
First register a script file and also create an AJAX Call.
wp_enqueue_script( 'meta-ajaxscript', get_stylesheet_directory_uri() . '/js/ajax-init.js', array( 'jquery' ), '', true );
wp_localize_script( 'meta-ajaxscript', 'ajaxMeta', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
));
Second, Wrap your metadata with a parent element by class or ID
<div id="metaWrapper">
<?php
$images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE');
$ppp = 3;
foreach (array_slice($images, 0, $ppp) as $image) { ?>
<div class="col-md-4">
<div class="boxe">
<?php echo "<img src="https://wordpress.stackexchange.com/questions/201684/{$image["full_url']}'/>"; ?>
</div>
</div>
<?php } ?>
</div>
<div class="loadmore"></div>
Third write down some ajax call script into ajax-init.js.
$( ".loadmore" ).on( "click", function(e) {
e.preventDefault();
var $container = $('#metaWrapper'),
ppp = 3,
number = $container.find( '> .col-md-4').length,
page = number / ppp;
$.ajax({
url: ajaxMeta.ajaxurl,
type: 'post',
data: {
'page': page,
'ppp': ppp,
action: 'meta_fetch'
},
success: function( response ) {
if(response == "")
{
// no content was found
$('.loadmore').hide();
}
else
{
console.log(response);
$container.append( response );
}
}
});
return false;
});
Now set up a PHP function to handle the AJAX request.
add_action( 'wp_ajax_nopriv_meta_fetch', 'wpex_metadata_fetch' );
add_action( 'wp_ajax_meta_fetch', 'wpex_metadata_fetch' );
function wpex_metadata_fetch() {
$images = rwmb_meta( 'tj_file_advanced', 'type=image&size=YOURSIZE');
$page = (int) $_POST['page'];
$ppp = (int) $_POST['ppp'];
foreach (array_slice($images, $page*$ppp, $ppp) as $image) { ?>
<div class="col-md-4">
<div class="boxe">
<?php echo "<img src="https://wordpress.stackexchange.com/questions/201684/{$image["full_url']}'/>"; ?>
</div>
</div>
<?php
}
die();
}
hope it makes sense and happy Codding!