Question

我正在尝试将Bootstrap模式中的图像转换为延迟加载。现在，当模态出现时，图像没有加载，所以我想使用$（window）.resize（）;会修复它，但它似乎没有工作。有什么想法吗？

 <li class="gift_item ease <?php $cat=get_the_category(); echo $cat[0]->slug;?>">
    <a href="#" class="btn" data-toggle="modal" data-target="#<?php echo $target;?>">btn</a>
    <div class="thumb">
        <img class="lazy" alt="<?php the_title();?>" src="<?php echo site_url('/wp-content/fohl/holder.png');?>" data-original="<?php echo $image[0];?>" />
        <noscript><img src="<?php echo $image[0];?>" alt="<?php the_title();?>"/></noscript>
    </div>
    <p class="title"><?php echo textLimit(get_the_title(),20);?></p>
 </li>
 <div class="modal fade" id="<?php echo $target;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><?php the_title()?></h4>
            </div>
            <div class="modal-body">
                <div class="main-image">
                    <?php $image=catch_that_image(); if($image):?>
                        <img class="lazy" alt="<?php the_title();?>" src="<?php echo site_url('/wp-content/fohl/holder.png');?>" data-original="<?php echo $image;?>" />
                        <noscript><img src="<?php echo $image;?>" alt="<?php the_title();?>"/></noscript>
                    <?php endif;?>
                    <script>
                        $('#<?php echo $target;?>').on('show.bs.modal', function () {
                            $(window).resize();
                        })
                    </script>
                </div>

                <div class="content">
                    <?php echo $content;?>
                </div>
            </div>
        </div>
    </div>
 </div>

Answer 1

您可以尝试在显示模式后初始化lazyload。将处理程序添加到事件“shown.bs.modal”。

$('#<?php echo $target;?>').on("shown.bs.modal", function () {
        $("img.lazy").lazyload();
});

同时从标记中删除'src'属性。

Answer 2

使用容器选项。

$('#<?php echo $target;?>').on("shown.bs.modal", function(){
  $("img.lazy").lazyload({
     container:$("#modal_id")
  });
});

Bootstrap Modal - 延迟加载图像

2 个答案: