Question

我在本地构建自定义Wordpress主题，并使用高级自定义字段来处理大部分内容以及自定义帖子类型。

我目前正在构建图库部分，并希望使用灯箱 - 两种尺寸的图片是自定义尺寸的精选图片。

在添加灯箱锚图像之前，我的代码如下所示：

<?php
$thumbnail_id = get_post_thumbnail_id(); 
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true ); 
?>
<a href="<?php the_permalink(); ?>">
    <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?>">
</a>

但是 - 当我添加灯箱图片时 - 灯箱功能正常工作 - 但页面加载会使页面略微跳跃。代码如下所示：

<?php
$thumbnail_id = get_post_thumbnail_id(); 
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php echo $thumbnail_url[0];?>" data-lightbox="gallery-images" data-title="<?php the_title();?>">
    <img class="gallerypics" src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>">
</a>

为什么会这样？我想也许这可能是一个javascript问题，但即使我只是在没有data-lightbox属性的锚点中添加图像，它仍会跳跃。

也许有人之前遇到过这个问题？

Answer 1

没关系 - 只是写下来的行为给出了答案，所以我想我会分享给可能有同样问题的人。我需要添加

html { overflow-x:auto; overflow-y:scroll; }

这会强制滚动条在内容完全加载之前就在那里，这就是它之前跳过的原因！

实现灯箱功能时页面跳转负载

1 个答案: