Lazy Loading not working, not displaying image?

Question

I am trying to use a fade in lazy loading effect. Although I have followed all the instructions but still the image is not appearing! Can anybody help more? code:

<head>
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script>
</head>

<body> 
<div class="collateral-body-image">
    <img class="lazy" data-original="images/vivid-collateral.jpg" width="1920" height="594">
</div>


<script type="text/javascript">
$(function(){
    $("img.lazy").lazyload({
    effect: "fadeIn"
  });
});

</script>

</body>

did you verify the jquery and lazyload links? it might be a simple wrong url issue... — Banana
– Banana, Commented Jun 21, 2015 at 12:11
either open dev console of your browser and go to sources and see if the files load correctly, or copy&paste the url to your address bar and append them to the current path (eg: if your site is located on www.mysite.com/myproject/example.html, then your links as you posted in your snippet are supposed to be located at www.mysite.com/myproject/jquery.js and same for lazyload). and see if the files open in your browser. — Banana
– Banana, Commented Jun 21, 2015 at 12:17
Ok I've checked via the console and it says file not found? I don't understand...how do i make sure its installed then? — Henry Brown
– Henry Brown, Commented Jun 21, 2015 at 12:21
you dont need to install them. just download the plugins (search on google where from there are plenty of places) and put them in a folder in your site. if you use IDE like visual studio, you can just drag the file into the page from the solution explorer and it will create a link with a proper url for you. Here is a working example fiddle — Banana
– Banana, Commented Jun 21, 2015 at 12:22

kishanio · Accepted Answer · 2015-06-21 12:51:58Z

1

If you wanna get it running just load it using CDN urls. Later you can download this scripts on your local and serve it using a local webserver on localhost.

Quick to-run code,

<html>
<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
</head>
<body>

    <div class="collateral-body-image">
        <img class="lazy" data-original="http://montanasteele.com/wp-content/uploads/gallery/vivid-condos/vivid-collateral-02.jpg" width="800" height="800">
    </div>

<script>
    $(function(){
        $("img.lazy").lazyload( {
           effect: "fadeIn"
        } );
    } );
</script>

answered Jun 21, 2015 at 12:51

kishanio

7,0898 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lazy Loading not working, not displaying image?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related