Блог

Я нашел здесь два похожих ответа, но оба оказались неудачными для моей ситуации (учитывая мою ограниченную способность переводить их в мою ситуацию). У меня есть страница с большим количеством довольно больших изображений, и метод начальной загрузки по умолчанию — загружать все модальные изображения при загрузке страницы. Видимый html отображается довольно быстро (для этого у меня есть счетчик), но дополнительное время загрузки скрытых модалов делает страницу непрактичной. Я хочу, чтобы страница загружала только видимый (немодальный) контент, чтобы завершить загрузку страницы (и очистить счетчик), а затем загружать содержимое каждого модала только при запуске этого модала. Я перепробовал все решения lazyload, которые смог найти, но изображения не будут отображаться в модальном режиме (отображаются заполнители ‘data-src’, но не изображения ‘src’, которые должны их заменить). Я хочу только лениво загружать (или загружать в ‘show.bs.modal’) большие изображения модального, те, что находятся в классе ‘modal-body’. Надеюсь, это достаточно ясно.

Пример кода:

 /* Javascript placed in the head */

<script>

function lazyLoad(){
    var $images = $('.lazy_load');

    $images.each(function(){
        var $img = $(this),
            src = $img.attr('data-src');

        $img
            .on('load',imgLoaded($img[0]))
            .attr('src',src);
        });
    };

    $('.modal-body').on("show.bs.modal", function () {
    lazyLoad();
};          

</script>

/* HTML in the modal section */


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="galleryheader">
                <img src="headerimage_1.png" height="77" width="1024">
            </div>
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                    </div>
                </div>
            </div>

                <div class="close-lower" data-dismiss="modal">
                <IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
                </div>
            </div>
        </div>
</div>
  

Во-первых, поместите lazy_load класс в img элемент, а не в родительский div . Во-вторых, jQuery, который вам нужен, выглядит примерно так:

 $('.portfolio-modal').on("show.bs.modal", function () {
    $('.lazy_load').each(function(){
        var img = $(this);
        img.attr('src', img.data('src'));
    });
});          
  

Примечания:

1. Используйте portfolio-modal класс для идентификации модала.
2. Используйте метод jQuery data() , чтобы заставить изображение загружаться лениво.