Having issues using Unveil, the lightweight Lazy Load plugin.

Question

I have these huge screenshots on my website in a dropdown section. The problem is that they're loading on page load so the initial page load is 15.8mb... way too big. I am trying to load them when they are revealed, so I am using Unveil which is a lightweight version of Lazy Load. I think I set up everything correctly according to the docs. However, once revealed the image isn't switching from the loading image to the actual image. I think it might have something to do with the version of jquery I'm using. In the demos for Unveil he's using 1.9.1, but I need to use the jquery that came with my expander plugin for that to work. Here is an example of the code I'm using:

HTML:

    <div class="laptop">
      <span>
        <img class="corpscroll" id="corp" src="/images/websites/loading.jpg" data-src="/images/websites/corp-philly.png"> 
      </span>
    </div><!-- laptop -->

jQuery:

      <!-- VENDOR JS
    ================================================== -->
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- PLUGINS
      ================================================== -->
      <script type="text/javascript" src="js/jquery.unveil.js"></script>
      <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
      <script type="text/javascript" src="js/jquery.scrollUp.min.js"></script>
      <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
      <script type="text/javascript" src="js/jquery.colio.min.js"></script>
      <script type="text/javascript" src="js/waypoints.min.js"></script>  
      <script type="text/javascript" src="css/colio-black/fancybox/jquery.fancybox.js"></script> 
     <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
    <script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> 

    <!-- CUSTOM SCRIPT
    ================================================== -->

    <script type="text/javascript">

    (function($){

        // "unveil" plugin 
        $("img").unveil();
        // "scrollTop" plugin 
        $.scrollUp();
        // "colio" plugin
        $('.portfolio .list').colio({
            id: 'demo_1',
            theme: 'black',
            placement: 'inside',
            hiddenItems: '.isotope-hidden',
            onContent: function(content){
                // init "fancybox" plugin
                $('.fancybox', content).fancybox();
            }
        });

        // "isotope" plugin
        var filter = '*', isotope_run = function(f) {
            $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
            trigger('colio','excludeHidden');
        };

        $('.portfolio .filters a').click(function(){
            $(this).addClass('filter-active').siblings().removeClass('filter-active');
            var href = $(this).attr('href').substr(1);
            filter = href ? '.' + href : '*';
            isotope_run(filter);
            return false;
        });

        isotope_run(filter);


        // Define object containing your Raphael path data.
        // goto http://lazylinepainter.info to convert your svg into a svgData object.
        var createSVG = {
            "create2": {
                "strokepath": [{
                "path": "M280.9,127.044h-34.049h-5.677v5.667v9.208L59.584,95.873v-7.084L161.729,49.12v4.249v5.667h5.674h34.049  h5.674v-5.667V19.366v-5.667h-5.674h-34.049h-5.674v5.667v17.708L59.584,77.098v-1.064v-5.666H53.91H19.862h-5.677v5.666v34.003  v5.671h5.674h34.049h5.673v-5.666v-2.479l181.594,46.047v8.501l-111.721,78.273H99.307h-5.674v5.669v34.004v5.666h5.674h34.048  h5.674v-5.666v-32.237l107.112-75.441h0.711H280.9h5.674v-5.666V132.71v-5.667H280.9z M173.078,25.035h22.7v22.667h-22.7V25.035z   M48.234,104.374H25.536V81.706h22.698V104.374z M127.681,274.39h-22.698v-22.668h22.698V274.39z M275.223,161.047h-22.698v-22.668  h22.698V161.047z",
                "duration": 1300
                }],
                "dimensions": {
                "width": 300,
                "height": 300
                }
            }
        };  

        var codeSVG = {
        "code2": {
          "strokepath": [
            {
              "path": "M 274.674,249.39 L 170.237,249.394 164.405,249.394 164.405,255.869 164.405,274.028 164.405,280.5 170.237,280.5    274.674,280.5 280.5,280.5 280.5,274.028 280.5,255.869 280.5,249.394  z",
                "duration": 600
              },
            {
              "path": "M 114.556,24.29 L 22.687,76.252 19.5,78.051 19.5,82.022 19.5,95.988 19.5,99.967 22.695,101.765 114.561,153.501    123.029,158.265 123.029,147.72 123.029,132.841 123.029,128.858 119.829,127.06 51.854,88.893 119.829,50.724 123.029,48.928    123.029,44.942 123.029,30.063 123.029,19.5  z",
                  "duration": 600
              },
            {
              "path": "M 222.453,19. L 205.447,19.5 201.711,19.5 200.151,23.283 98.129,271.332 94.358,280.5 103.433,280.5 120.438,280.5    124.187,280.5 125.74,276.71 227.755,28.669 231.521,19.5  z",
                "duration": 600
            }
              ],
                "dimensions": {
                    "width": 300,
                    "height": 300
                    }
                }
            }; 


        var convertSVG = {
        "convert2": {
          "strokepath": [
            {
              "path": "M209.423,15.126c24.964,0,49.92,0,74.865,0c0,23.899,0,47.801,0,71.7   c-7.242,0.62-15.717,0.09-23.447,0.269c-0.649-10.625-0.095-22.396-0.277-33.466c-2.807,1.564-5.023,3.922-7.347,6.109   c-35.226,33.115-71.141,67.045-106.495,100.377c-16.169-14.312-31.013-28.876-47.182-44.08c-0.944-0.88-3.024-2.92-3.11-2.92   c-0.572-0.02-3.995,3.495-5.079,4.513c-10.397,9.771-19.062,17.908-29.669,27.882c-1.247,1.173-4.107,4.757-4.801,4.782   c-0.866,0.033-6.854-6.174-7.625-6.903c-2.807-2.639-5.234-5.511-7.625-6.903c2.062,25.984,12.616,43.073,28.525,56.293   c15.199,12.633,38.282,22.758,66.115,19.126c25.787-3.374,44.166-15.151,56.21-30.277c11.272-14.149,20.589-35.221,16.091-60.545   c-0.233-1.336-1.022-3.164-0.831-4.252c0.38-2.358,7.261-7.62,9.037-9.29c1.664-1.56,3.318-2.863,4.801-4.248   c1.516-1.425,2.642-3.526,4.81-3.718c11.768,27.442,5.181,67.978-9.904,86.843c14.687,14.099,30.025,29.233,45.776,43.285   c7.833,6.979,19.221,14,18.639,27.873c-0.363,8.765-5.779,15.541-12.149,19.914c-7.424,5.117-20.984,5.784-29.088,0.271   c-5.442-3.706-10.121-9.506-15.268-14.337c-14.955-14.067-31.116-28.533-45.751-42.494c-16.688,8.846-37.295,14.67-61.02,13.016   c-22.459-1.563-41.211-9.627-55.093-19.116c-26.359-18.034-50.726-53.035-42.095-98.792c7.192-38.063,33.863-64.752,68.94-76.742   c19.037-6.517,44.356-7.824,64.962-2.391c19.574,5.156,34.67,14.438,47.468,26.024c-4.836,5.551-10.753,10.068-15.822,15.403   c-16.811-16.242-48.396-29.629-82.779-20.714c-28.377,7.363-47.38,26.151-57.059,50.453c2.062,3.299,4.731,4.977,7.911,7.966   c0.407,0.383,2.157,2.643,2.547,2.655c0.694,0.033,4.021-3.515,5.078-4.512c10.19-9.583,19.185-18.026,29.669-27.882   c1.283-1.218,4.255-4.761,4.801-4.781c0.866-0.037,4.956,4.39,6.499,5.84c14.454,13.595,29.236,27.866,43.784,41.163   c32.183-30.207,65.37-60.878,96.606-91.082c-11.203-0.179-23.16,0.347-33.896-0.269c0-7.082,0-14.165,0-21.243   C209.119,15.545,209.102,15.171,209.423,15.126z",
                    "duration": 1800
            }
              ],
              "dimensions": {
                  "width": 300,
                  "height": 300
                  }
              }
          }; 


    /* 
     Setup and Paint your lazyline! 
     */ 

        $('.thing').waypoint(function() {
            //  Setup your Lazy Line element.
            //  see README file for more settings
            $('#create2').lazylinepainter({"svgData": createSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint'); 
        }, {triggerOnce: true});

        $('.thing2').waypoint(function() {
            //  Setup your Lazy Line element.
            //  see README file for more settings
            $('#code2').lazylinepainter({"svgData": codeSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint'); 
        }, {triggerOnce: true});

        $('.thing3').waypoint(function() {
            //  Setup your Lazy Line element.
            //  see README file for more settings
            $('#convert2').lazylinepainter({"svgData": convertSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint'); 
        }, {triggerOnce: true});



    })( jQuery ); 

    </script>

Unveil docs: http://luis-almeida.github.io/unveil/

My website: http://histeph.com/

If you are able to help, I'd really appreciate it.

Answer 1

Colio seems to be using jQuery 1.10.2. I tried Unveil with this version of jQuery and the sample worked, so as far as I know Unveil is compatible with this version of jQuery. In fact, the solution I'll provide below works when you remove the following line:

<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>

The problem here is that you are calling the unveil function before the Colio plugin loads content for the portfolio item that you click on, so it tries to load the images it can see (the thumbnails) and not the actual website screenshots. What you want to do is call the unveil function inside the onContent event for the Colio plugin like so:

$('.portfolio .list').colio({
    id: 'demo_1',
    theme: 'black',
    placement: 'inside',
    hiddenItems: '.isotope-hidden',
    onContent: function(content){
        // init "fancybox" plugin
        $('.fancybox', content).fancybox();
        // "unveil" plugin
        $("img").unveil();
    }
});