短代码函数 Wordpress

如何解决短代码函数 Wordpress

我正在为我的短代码所需的 javascript 资源加载问题而苦苦挣扎。 javascript 资源似乎总是在解析短代码之前加载，即使我正在排队脚本，异步并推迟它......

这里是加载脚本函数：

function load_tuinch_script(){
wp_register_script('tuinch_script',get_stylesheet_directory_uri() . '/js/tuinch.js',array( 'jquery' ));
wp_enqueue_script( 'tuinch_script' );
wp_register_script('tuinch-product-images-script',get_stylesheet_directory_uri() . '/js/tuinch-product-images.js#asyncload',array( 'jquery' ),time(),true);
}
add_action('wp_enqueue_scripts','load_tuinch_script');

这是将脚本排入队列的短代码函数（除其他事项外）：

function shortcode_tuinch_product_images($atts){
global $product;
wp_enqueue_script( 'tuinch-product-images-script' );
if(is_a( $product,'WC_Product' )){
$featured_image = wp_get_attachment_url($product->get_image_id());
$gallery_images = $product->get_gallery_image_ids();
$o .= '<div class="tuinch-product-images-wrapper" style="display:flex">';
$o .= '<div style="width:160px;position:relative;"><div class="tuinch-product-images-thumbs" style="position:fixed">';
$o .= '<div style="margin-bottom:10px"><a class="tuinch-product-thumb" rel="#tuinch-product-image-'.$product->get_image_id().'"><img src="'.$featured_image.'" style="width:100%;max-width:150px;"></a></div>';
if (count($gallery_images)>0){
    foreach( $gallery_images as $gallery_image ){
        $image_url = wp_get_attachment_url( $gallery_image );
        $o .= '<div style="margin-bottom:10px"><a class="tuinch-product-thumb" rel="#tuinch-product-image-'.$gallery_image.'">'.wp_get_attachment_image($gallery_image,'thumbnail').'</a></div>';
    }
}
$o .= '</div></div>';
$o .= '<div class="tuinch-product-images-slider" style="width:calc(100% - 150px)"><div class"tuinch-product-images-slider-inner" style="width:100%">';
$o .= '<div id="tuinch-product-image-'.$product->get_image_id().'" class="tuinch-product-images-slider-slide" style="position:relative;margin-bottom:10px;overflow:hidden">';
$o .= '<img class="tuinch-image" src="'.$featured_image.'" />';
$o .= '<div class="tuinch-cache" style="display:none;position:absolute;top:0;left:0;background-color:#fff;width:1000px;height:1000px;transition:all .3s"></div>';
$o .= '<img class="tuinch-zoom" style="position: absolute;opacity:0;top:0;left:0;transition: opacity .5s ease,z-index 10ms .5s;max-width:none !important;cursor:cross" src="'.$featured_image.'" />';
$o .= '</div>';
if (count($gallery_images)>0){
    foreach( $gallery_images as $gallery_image ){
        $image_url = wp_get_attachment_url( $gallery_image );
        $o .= '<div id="tuinch-product-image-'.$gallery_image.'" class="tuinch-product-images-slider-slide" style="position:relative;margin-bottom:10px;overflow:hidden">';
        $o .= '<img class="tuinch-image" src="'.wp_get_attachment_image_url($gallery_image,'full').'" />';
        $o .= '<div class="tuinch-cache" style="display:none;position:absolute;top:50%;transform:translateY(-50%);left:50%;transform:translateX(-50%);background-color:#fff;width:1000px;height:1000px;transition:all .3s"></div>';
        $o .= '<img class="tuinch-zoom" style="position: absolute;opacity:0;top:0;left:0;transition: opacity .5s ease,z-index 10ms .5s;max-width:none !important;cursor:cross" src="'.wp_get_attachment_image_url($gallery_image,'full').'" />';
        $o .= '</div>';
    }
}
$o .= '</div></div>';
$o .= '</div>';
}
return $o;
}
add_shortcode('tuinch-product-images','shortcode_tuinch_product_images');

Js 文件基本上试图输出通过短代码生成的元素的高度（并且总是返回 0）：

jQuery(document).ready(function($){
    console.log($(".tuinch-product-images-wrapper").height());
});

你能帮我吗，因为无论我怎么尝试，它都不起作用......