在Flexslider中延迟加载背景图片 - php

我试图在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");
        });
    }
  });
}); 

参考方案

尝试这个：

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

代码未在服务器目录php中创建文件 - php

我正在尝试使用以下代码将新文件写入服务器error_reporting(E_ALL); ini_set('display_errors', 1); if($_SERVER['REQUEST_METHOD'] == "POST") { $html = $_POST['html'];…

CodeIgniter更新查询被执行两次 - php

我正在使用CodeIgniter 2.2。每次访问页面时，我都必须用+1更新数据库。代码可以工作，但是每次都会增加+2。示例：如果是total views=2，则在单击页面后total views应该是3，但是数据库中的值是4。我确定我在控制器中仅调用一次模型add_one_to_view_image。控制者 function view(){ $view_i…

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

通过php表单修改我的xml文件 - php

这是我的xml文件和下面的php代码。我输入了一个输入类型，它将按名字搜索学生。然后将显示有关特定学生的信息，并且将显示另一个按钮更新。问题是我想在那之后修改信息。如何通过标签名称获取元素，以便可以修改有关特定学生的信息？<students> <student> <firstname>John</firstname&…

在ajax之后将页面内容复制到同一页面 - php

我有简单的注册公式，我希望首先使用ajax发送，而不刷新页面以控制是否插入正确的数据，然后仅重定向到其他页面。问题是，当我通过ajax将其发送到同一页面后，一切正常，但是页面内容重复，我可以看到两次...这是我的ajaxfunction registruj () { var name = $('#meno').val(); var pri…