Question

我试图在Flexslider中懒得加载背景图片并且没有运气。这是我的代码，目前根本没有发生延迟加载。我哪里错了？

HTML / PHP：

<div class="wall">
    <ul class="slides">
        <?php $closed = true;
        $numInGrid = 9;
        $c = 0;                             
        while ($the_query->have_posts()) {
        $the_query->the_post();
            if($c == 0) {
                echo '<li>';
                $closed = false;
            }                           
            $c++; ?>                                    
                    <div class="col span_4_of_12 <?php if(($c == 0) || ($c == 4) || ($c == 7)) { ?>first<?php } ?>">

                        <a href="<?php echo get_the_permalink(); ?>">
                            <div class="projectThumb">
                                <h2 class="projectTitle">
                                    <?php echo strip_tags(get_the_title()); ?>
                                </h2>

                                <?php $image = get_field('image');
                                if($image) {

                                    // vars
                                    $url = $image['url'];
                                    $title = $image['title'];
                                    $alt = $image['alt'];
                                    $caption = $image['caption'];

                                    // thumbnail
                                    $size = 'project-featured-image';
                                    $thumb = $image['sizes'][ $size ];
                                    $width = $image['sizes'][ $size . '-width' ];
                                    $height = $image['sizes'][ $size . '-height' ]; ?>


                                    <div class="thumb lazy" style="background-image:url(<?php echo $thumb; ?>);">
                                    </div>
                                <?php } elseif(!$image) { 

                                    // Use the first project image from the gallery section of the mapify options if there are any
                                    $pin_id = intval($post->ID);
                                    $map_location = new Mpfy_Map_Location($pin_id);
                                    $images = $map_location->get_gallery_images(); ?>

                                    <div class="thumb lazy" style="background-image:url(<?php echo mpfy_get_thumb($images[0]['image']); ?>);">
                                    </div>
                                <?php } else { ?>
                                    <div class="thumb lazy">
                                    </div>                                                      
                                <?php } ?>

                            </div>
                        </a>

                    </div>

            <?php if($c == $numInGrid) {

                echo '</li>';
                $closed = true;
                $c = 0;

            }

        } // end while

        if(!$closed) {
            echo '</li>';
        } ?>

    </ul>           
</div>

Jquery的：

$(window).load(function() {
  $('.wall').flexslider({
    animation: "slide",
    controlNav: false,
    slideshow: true,        
    animationLoop: false,
    startAt: 1,
    init: function (slider) {
        // lazy load
        $(".lazy").slice(0,5).each(function () {
            var src = $(this).attr("data-src");
            $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
        });
    },
    before: function (slider) {
        // lazy load
        $(".lazy").slice(0,3).each(function () {
            var src = $(this).attr("data-src");
            $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
        });
    }
  });
});

Answer 1

试试这个：

1. Make correction in image div and add attribute "data-src" instead of "style"
2. Add loading image in ".lazy" class

<div class="thumb lazy" data-src="background-image:url(//flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg)"></div>

$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    slideshow: true,
    animationLoop: false,
    startAt: 1,
    init: function (slider) {
    // lazy load
        $(".lazy").slice(0, 5).each(function () {
            var src = $(this).attr("data-src");
            $(this).attr("style", src).removeAttr("data-src").removeClass("lazy");
        });
    },
    before: function (slider) {
        // lazy load
        $(".lazy").slice(0, 3).each(function () {
            var src = $(this).attr("data-src");
            $(this).attr("style", src).removeAttr("data-src").removeClass("lazy");
        });
    }
});

DEMO

Flexslider中的延迟加载背景图像

1 个答案: