EzDevInfo.com

lazyload

Lazyload images, iframes, widgets with a standalone JavaScript lazyloader Lazyload by vvo

How to create lazy load effect with jquery with the same class elements showing them on scoll after each other and with loading when it is hidden

I have elements with the same class and I need to show them on scroll like lazy load effect.I tried this code 

jQuery(window).scroll( function(){
    jQuery('.scrollable_section').each( function(i){
        var bottom_of_object = jQuery(this).position().top + jQuery(this).outerHeight();
        var bottom_of_window = jQuery(window).scrollTop() + jQuery(window).height();
        if( bottom_of_window > bottom_of_object ){
            jQuery(this).animate({'opacity':'1'},500, function(){
                jQuery(this).addClass('activeSection');
            });
        }
    });
});

It is working fine on desktop but on tablet it showed elements not in the proper scroll position, I need to scroll and scroll and then it shows.


Source: (StackOverflow)

How do I integrate lazyload & bxslider together?

I want to lazily load images in the bxslider (or any slider like control, which allows dynamic number of slides/images). I'm using lazyload for loading images lazily, but the images in the slider isn't loading lazily. All the images are getting loaded with the pages :|. Here is my code,

<link rel='nofollow' href="jquery.bxslider.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script src="jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function() {

    $(":not(#hcontainer) img.lazy").lazyload({
        effect: "fadeIn"
      });

      $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#hcontainer")
      });

    $('.bxslider').bxSlider({
      minSlides: 1,
      maxSlides: 3,
      slideWidth: 170,
      slideMargin: 10,
      pager: true
    });

    });
      </script>

    <style type="text/css">
    #hcontainer {
        height: 250px;
        overflow: hidden;
    }
    #inner_container {
          width: 900px;
        }
    </style>



    <div id="vcontainer">
      <div id="hcontainer">
        <div id="inner_container">
    <ul class="bxslider">
          <li><img class="lazy" src="1.jpg" data-original="1.jpg" alt="BMW M1 Hood"></li>   
    <li>      <img class="lazy" src="2.jpg" data-original="2.jpg" alt="BMW M1 Side"></li>
        <li>  <img class="lazy" src="3.jpg" data-original="3.jpg"  alt="Viper 1"></li>
        <li>  <img class="lazy" src="4.jpg" data-original="4.jpg" alt="Viper Corner"></li>
        <li>  <img class="lazy" src="5.jpg" data-original="5.jpg" alt="BMW M3 GT"></li>
        <li>  <img class="lazy" src="6.jpg" data-original="6.jpg" alt="Corvette Pitstop"></li>
    </ul>

        </div>
      </div>
      <br/>
      <img class="lazy img-responsive" data-original="2.jpg" width="465" height="574" alt="BMW M1 Side">
      <br/>
      <img class="lazy img-responsive" data-original="3.jpg" width="465" height="574" alt="Viper 1">
      <br/>
      <img class="lazy img-responsive" data-original="4.jpg" width="465" height="574" alt="Viper Corner">
      <br/>
      <img class="lazy img-responsive" data-original="5.jpg" width="465" height="574" alt="BMW M3 GT">
      <br/>
      <img class="lazy img-responsive" data-original="6.jpg" width="465" height="574" alt="Corvette Pitstop">
      <br/>
    </div>

What am I doing wrong?

p.s. I'm open to use any other slider control, if it supports lazyloading.


Source: (StackOverflow)

Advertisements

How to lazy load images vertically & horizontally?

My website has a image grid, which has horizontal and vertical scroll. I want to load images which are vertically places first and then horizontal images, all of them lazily.

In other words, when user scroll down vertical images should load lazily and when user scrolls horizontally images the horizontal images should load lazily. I tried using lazyload, but I'm not able to use get it working for both vertical and horizontal images container.

Only horizontal or vertical scrolling is working at a time. I want both of them to work!

My test code is as follows,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
 $("img.lazy").lazyload({
effect : "fadeIn",
container: $("#hcontainer")
});
});
  </script>

<style type="text/css">
#hcontainer {
    height: 800px;
    overflow: scroll;
}
#inner_container {
      width: 4750px;
    }
</style>

<div id="vcontainer">
<div id="hcontainer">
    <div id="inner_container">
          <img class="lazy" data-original="1.jpg" width="765" height="574" alt="BMW M1 Hood">
          <img class="lazy" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side">
          <img class="lazy" data-original="3.jpg" width="765" height="574" alt="Viper 1">
          <img class="lazy" data-original="4.jpg" width="765" height="574" alt="Viper Corner">
          <img class="lazy" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT">
          <img class="lazy" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop">
        </div>
</div>
<br/>
        <img class="lazy img-responsive" data-original="2.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="3.jpg" width="765" height="574" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="4.jpg" width="765" height="574" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="5.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="6.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
</div>

It isn't working as I want it to be. Can anyone help me with it?

Please see following pic for the output, I need vertical images to be loaded lazily as well, which isn't happening. enter image description here


Source: (StackOverflow)

lazy load div content with html5 Audio

I am trying to implement products on an ecommerce site. The products all have a html audio clip - the problem I am facing is that only a selection of the clips are loading. I am thinking that if I can use a lazy load on the container div of each 'row' then this will solve the problem. See attached a screenshot and below the html

PS: I can only find img load lazy load scripts. Please help! :)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

http://codepen.io/anon/pen/BNXOzg

<div class="container">

<div class="product-row cf">

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    


<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    


<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->    


<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->  

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->   

<div class="item">

    <div class="item-image">imagehere</div><!-- item-image -->

    <div class="item-name">namehere</div><!-- item-name -->

    <div class="item-player lazyload">
        <audio controls>
            <source src="http://
            [ekm:nested_productattributes]
            key="MP3";
            productid="[id]";
            value_only="true";
            output_start="";
            output_item="[value]";
            output_end="";
            [/ekm:nested_productattributes]
            " type="audio/mpeg">
        </audio>
    </div><!-- item-player -->

    <div class="item-details cf">

        <div class="item-left">

            <div class="price">
                <span class="price-title">Price</span>
                <span class="product-price">£0.00</span>
            </div>

            <a rel='nofollow' href="[url]">View<i class="fa fa-chevron-right"></i></a>

        </div><!-- item-left -->

        <div class="item-format">

            <span class="format-title">Format</span>

        </div><!-- format -->

    </div><!-- item-details -->

</div><!-- item -->


Source: (StackOverflow)

ionic LazyLoad Failed to instantiate module starter

I try to use ionic -image - lazy -load but get an error every application displays a blank page.

Here is my code:

   <script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/SocialSharing.js"></script>
<script src="js/ionic-image-lazy-load.js"></script>

controller.js: 

angular.module('starter.controllers', ['ionic', 'ngCordova', 'ionicLazyLoad'])

the error: 

ncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:

Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to: Error: [$injector:modulerr] Failed to instantiate module ionicLazyLoad due to: Error: [$injector:nomod] Module 'ionicLazyLoad' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.3/$injector/nomod?p0=ionicLazyLoad at REGEX_STRING_REGEXP (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:8895:12) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:10785:17 at ensure (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:10709:38) at module (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:10783:14) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13189:22 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13190:40 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=ionicLazyLoad&p1=Er…%3A%2F%2F10.0.0.42%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5) at REGEX_STRING_REGEXP (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:8895:12) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13212:15 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13190:40 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13190:40 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=starter.controllers…%3A%2F%2F10.0.0.42%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5) at REGEX_STRING_REGEXP (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:8895:12) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13212:15 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) at http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13190:40 at forEach (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:9163:20) at loadModules (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13173:5) at createInjector (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:13099:11) at doBootstrap (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:10457:20) at bootstrap (http://10.0.0.42:8100/lib/ionic/js/ionic.bundle.js:10478:12) http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=starter&p1=Error%3A…3A%2F%2F10.0.0.42%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A10478%3A12)REGEX_STRING_REGEXP @ ionic.bundle.js:8895(anonymous function) @ ionic.bundle.js:13212forEach @ ionic.bundle.js:9163loadModules @ ionic.bundle.js:13173createInjector @ ionic.bundle.js:13099doBootstrap @ ionic.bundle.js:10457bootstrap @ ionic.bundle.js:10478angularInit @ ionic.bundle.js:10372(anonymous function) @ ionic.bundle.js:37186trigger @ ionic.bundle.js:11823eventHandler @ ionic.bundle.js:12098


Source: (StackOverflow)

Uee funcion with arg in angular stateProvider resolve

How to use a function with arguments in angular's stateprovider resolve?

I want to load my controller as needed with ocLazyLoad.

Let's say I have the following stateprovider:

$stateProvider
                    .state('access', {
                            url: '/access',
                            template: '<a rel='nofollow' href="./signin">Sign in</a>'
                    })
                    .state('signin', {
                            url: '/signin',
                            templateUrl: './tpl/page_signin',
                            resolve: {
                                load: load2('../javascripts/controllers/signup.js'),
                                skipIfLoggedIn: skipIfLoggedIn
                            }
                    })

The function "load2()" below the stateprovider is:

function load2(src){
                        return{
                            deps: ['$ocLazyLoad', '$q',
                                function( $ocLazyLoad, $q ){
                                    var deferred = $q.defer();
                                    deferred.then(function(){
                                        return $ocLazyLoad.load(src);
                                    });
                                    deferred.resolve();
                                    return deferred.promise;
                                }
                            ]
                        }
                    }

Unfortunately it doesn't work; I got the the following error:

Error: [ng:areq] Argument 'fn' is not a function, got Object

The function "skipIfLoggedIn()" works without any errors.

Do you know how to use a function with arguments in the resolve part of stateprovider?

Thank you very much!


Source: (StackOverflow)

lazySizes + fancybox => img don't load after lightbox [duplicate]

This question already has an answer here:

I'm using libraries lazySizes and fancybox. Lazyload works good, but when I'm trying to scroll gallery after lightbox, next images won't load.

Also, this construction in the page generated by jslink view (sharepoint 2013) with Image Rendition.

<a class='fancybox-thumb' 
   rel='gallery' 
   rel='nofollow' href='" + itemUrl + "?RenditionID=7' 
   title=''>
   <img class='lazyload' 
        data-src='"+ itemUrl +"?RenditionID=6' 
        style='margin-right: 3px; border-radius: 10px 10px 10px 10px;' 
        width=200px 
        height=200px />
</a>

Source: (StackOverflow)

owlcarousel autoheight and lazyload together

Owlcarousel with Autoheight AND Lazyload? My current situation: 

 $(".property-carousel").owlCarousel({
        rtl: _rtl,
        items: 1,
        responsiveBaseWidth: ".property-slide",
        dots: false,
        nav: true,
        lazyLoad : true,
        autoHeight : true,
        navText: ["",""]
    });

The Image loads but the only as an 1px height full witdh line. If I go forward to the next Image and return to the previous the Image is in a normal height.

How do i get the autoheight and lazyload work together ?

In the Console isnt any Error.


Source: (StackOverflow)