Lazy Loading not working, not displaying image?

Question

Lazy Loading not working, not displaying image?

4.6k views Asked by Henry Brown At 14 September 2024 at 08:29

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>

Original Q&A

There are 1 answers

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

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>

TechQA.

Lazy Loading not working, not displaying image?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in JQUERY-LAZYLOAD

Popular Questions

Popular Tags

Trending Questions