title: Lazy load images in slick_slider are not being used by CDN
body: <p>I am having an issue with my slider. We use <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick slider</a> which we like very much.. However we noticed via dev tools that only the first image in our slider is being used by our CDN. While the others which are using lazy load functionality is not being used by the CDN </p>
  
  <p><a href="https://wpengine.com/support/how-does-a-cdn-work/" rel="nofollow noreferrer">This is how the cdn works</a></p>
  
  <p>We use wpengine.com to host our wordpress site. They have max-cdn built into our install and all images we use on the site or upload to the media library are "CDN" links when you look at them in dev tools.</p>
  
  <p>So in our Header.php we have slider html like this:</p>
  
  <pre><code>&lt;section class="lazy fade single-item slider" style="max-height:324px; 
  overflow:hidden;"&gt;
      &lt;a class="slide-link" href="#"&gt;
          &lt;div&gt;
              &lt;img src="/images/img1.jpg"&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="slide-link laz-slide" href="#"&gt;
          &lt;div&gt;
              &lt;img data-lazy="/images/img2.jpg"&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a class="slide-link laz-slide" href="#"&gt;
          &lt;div&gt;
              &lt;img data-lazy="/images/img3.jpg"&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>You will notice that the first image tag is using <strong>src=""</strong> while the other images are using <strong>data-lazy=""</strong></p>
  
  <p>This lazy load function is built into <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick slider</a> - if you hit <em>ctrl+f</em> on that link and search "lazy" you can see how they reference it on the github page</p>
  
  <p>My problem is that the image that are relyig on <strong>data-lazy=""</strong> for lazy loading are not being used by our <strong>CDN</strong>. However if i simply change them to <strong>src=""</strong> and save, when i check in dev tools it shows them all being loaded by <strong>CDN</strong>.</p>
  
  <p>Can anyone think of a relatively simply solution that allows me to use both lazy-load and the CDN for my <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick slider</a> images?</p>
  
  <p>Thanks</p>