小编Jon*_*hot的帖子

我有一个视频元素用作我正在构建的页面底部的部分的背景.我试图通过将src存储为data-src属性并使用jQuery在其他资源加载后将其应用于src属性来构建一种"延迟加载"(因为它不是英雄图像或任何事情,我想加载海报以节省切割加载时间,然后加载视频).它根本不适合我.src属性已正确应用,但视频未加载或自动播放.我是从错误的角度接近这个吗？有没有更好的方法来实现它？

建立在wordpress上.

基本的HTML

<video width="100%" loop controls autoplay class="connect-bg">
    <source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>

jQuery函数

$(window).load(function(){
    footer_lazyloader();
});

function footer_lazyloader() {
    var $ = jQuery;

    $("video.connect-bg source").each(function(){
        var sourceFile = $(this).attr('data-src');
        $(this).attr('src',sourceFile);
    });
}

我正在使用联系表单 7 将两个不同的表单加载到一个页面中，然后除了发送电子邮件之外，还将该信息动态添加到数据库中。不幸的是，由于插件的原因，我不能简单地创建具有不同名称的所有输入以避免需要过滤器。因此，本质上，我想将表单 ID 拉入操作挂钩并根据提交的表单动态创建 $data 变量，但我不确定如何获取 cf7 表单 ID。有谁知道如何做到这一点，或者更可行的方法？

表单简码

[contact-form-7 id="221" title="Reg 1"] [contact-form-7 id="112" title="Reg 2"]

在functions.php中的PHP动作钩子

function save_form( $wpcf7 ) {


global $wpdb;

   $form_to_DB = WPCF7_Submission::get_instance();

   if($form_to_DB) {
       $formData = $form_to_DB->get_posted_data(); 
   }

   if("Request a Free Demo" != $formData['demo_request'][0]){
   $freeDemo = "yes";}else { $freeDemo = "nope";}

   if(THE FORM ID = 221) {
   $data = array(
          some values from the 112 form
      $wpdb->insert( $wpdb->prefix . 'registrations', $data );
   );
   }elseif(THE FORM ID = 112) {
     $data = array( …

我遇到了这个我似乎无法解决的抗锯齿 Chrome 错误。

我有两种类型的容器正在使用 transform 属性进行旋转。A 型具有纯色背景。类型 B 有一个带有 background-attachment:fixed 属性的图像背景，以强制它与它所在容器的背景图像对齐。

两种类型在旋转后都在 Chrome 中呈现锯齿状边缘。类型 A 上的锯齿状边缘已通过 -webkit-backface-visibilty: hidden; 解决，所以我不需要任何帮助。但是，我在容器类型 B 上的这个技巧没有那么幸运。使用该类破坏了背景图像和固定图像“视差”功能。

我已经尝试了几乎所有我能在各种论坛上找到的补救措施，并不断脱颖而出。有人对如何清理它有任何想法吗？下面的示例，最容易在 Chrome 中图像容器的底部边缘看到（我使用的是 44.0.2403.130（64 位）版本）！

HTML

<div class="spacer"></div>
<div class="content">
    <div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
        <div class="bottom-divider"></div>
    </div>
</div>
<div class="spacer"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
.content {
    position: relative;
    margin-bottom: 250px;
    z-index: 9999;
}
.back {
    min-height: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: …