Jquery Lazy Loading not working properly

Question

I'm trying to implement a jQuery technique called lazy loading . The goal I'm trying to achieve is I want the page to load without waiting for all the images request so , I want the page to load first with CSS, etc., and let the images load slowly.

The issue I'm facing here is, it waits for all the image requests before the page is loaded which is the opposite of the concept of lazy loading. Can someone help me?

<html>
    <head>
        <link rel="stylesheet" href="css/float.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
        <script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    $(function(){
                        $("img.lazy").lazyload();
                    });
                });
            </script>
    </head>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/>
<br>

Barmar · Accepted Answer · 2013-06-01 04:20:29Z

12

You're not using the plugin properly. Read the documentation, you're supposed to put the URL of the image in the data-original attribute. The src attribute should contain the URL of a dummy image that's used for all the items until they load the real image.

<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>

Also, as the other answers pointed out, you need to call the plugin from the document ready handler.

jQuery(document).ready(function ($) {
    $("img.lazy").lazyload(
        { data_attribute: "orig" 
        });
});

The data_attribute option tells the plugin what data-XXX attribute to find the real URL in. It defaults to data-original, the above option changes it to data-orig to match the mistaken HTML I gave you.

FIDDLE

edited Jun 1, 2013 at 4:20

answered Jun 1, 2013 at 3:19

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

6 Comments

Barmar Over a year ago

You have the same URL in src and data-original, don't you? That's wrong.

Barmar Over a year ago

All the images should point to the same src, which should be a simple image that's used as a placeholder. This allows them to load quickly, because it's cached the first time.

JackRoster Over a year ago

okay , i replaced all . Can you just take a look at the modified code above . The problem now is , It doesn't load anything at all just that dummy image

Barmar Over a year ago

Try downloading the plugin and loading it from there. I got an error when I tried accessing it from github in a fiddle.

Barmar Over a year ago

See the change I posted above. Either add the option to the lazyload call, or change all your images to use data-original instead of data-orig.

|

Fallexe · Accepted Answer · 2013-06-01 03:13:41Z

2

Wrap your script in the onload function so that it does not execute until the page is loaded.

$(function() {
    $("img.lazy").lazyload();
});

answered Jun 1, 2013 at 3:13

Fallexe

5962 silver badges11 bronze badges

Comments

PSL · Accepted Answer · 2013-06-01 03:13:44Z

1

Place your script under document.ready. SO that your $("img.lazy") is executed after the document is loaded and just when the image tags are available in DOM.

$(function(){
   $("img.lazy").lazyload();
});

easiest way you can find this out is place an alert or console.log just before $("img.lazy").lazyload(); i.e

<script>
console.log($("img.lazy").length); // this will log 0
 $("img.lazy").lazyload();
 </script>

answered Jun 1, 2013 at 3:13

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

JackRoster Over a year ago

PSL do you mean like this <script> $(document).ready(function() { $(function(){ $("img.lazy").lazyload(); }) }); </script>

Collectives™ on Stack Overflow

Jquery Lazy Loading not working properly

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related