窗口宽度函数内的JQuery函数无法正常工作

Question

我试图阻止我的移动客户在提交表单后下载非必要的3mb gif。 这两个功能独立工作，例如如果宽度＆gt; console.log（“它工作”） 524. img加载功能本身就可以工作。但是当我把它们组合起来时却不是这样：

if($(window).width() >= 524){
     $('<img src="/img/thank.gif">').load(function() {
        $(this).appendTo('#thankyou-pic');
      });
 };

Answer 1

jQuery＆＃34;加载＆＃34;处理程序快捷方式已弃用（source），并且在理想情况下对其使用有一些注意事项。

正如Maadinsh提到的问题in the comments，使用CSS3媒体查询加载或不加载图片可能会更好。

作为示例实现，您可以将此添加到此页面的CSS中：

@media (min-width: 524px) {
  #thankyou-pic {
    background-image: url("/img/thank.gif");
  }
}

这会将背景图片应用到您的＆＃34; thankyou-pic＆＃34;元素仅在屏幕大小大于524px宽时，从CSS规则中定义的URL中提取图像。

注意：您可能需要稍微调整一下网址，因为它现在将是您的网站的位置。文件夹，指的是CSS文件所在的位置。