my picture are not displayed using lazy load

Question

I have browesed through many posts here including this here

but i still have the problem, i do not what could be the reason but the img are not displayed at all.

this is my code

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>    
    <script>    
        function(){$("img.lazy").show().lazyload();}
    </script>        
</head>

<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">

Why there are white space in your image names? this might be the problem, you're using a wrong path! — mamod, Aug 09 '13 at 12:26
No, the img is working when i am using src instead of data-original — MyName, Aug 09 '13 at 14:12
oops I didn't spot the real issue as "naming of images" blocked my sight, I think @Vadim just fixed your problem. but I still think you have to fix the white space thing as it's not valid and considered as a bad practice especially when you use it in src, see [This answer](http://stackoverflow.com/questions/4172579/html-href-syntax-is-it-okay-to-have-space-in-file-name) — mamod, Aug 09 '13 at 16:06

Vadim · Answer 1 · 2013-08-09T20:01:45.157

1

In the script where you invoke layzyload plugin you wrapped it with anonymous function that is never called. If you want it to run once page HTML is loaded, you should pass it to jQuery

The following script

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

should be

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

Here is a working example http://jsbin.com/uberoh/1/edit

Another, more simple option, is to move your <script>$("img.lazy").lazyload();</script> from head of the document to the end of the body. In this case script will be executed after all <img> are already in the domcument and therefore accessible by jQuery selector $("img.lazy")

HTML

<body>
    ...
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    ...
    <script>$("img.lazy").lazyload();</script>
</body>

Working example of the code above see here http://jsbin.com/uberoh/3/edit

edited Aug 09 '13 at 20:01

answered Aug 09 '13 at 15:14

Vadim

8,701
4
43
50

I got the idea about the function, but it did not work without the function as well. And do not know what you mean by passing the funtion to jQuery how can I do that? The working example is not clear for me sorry :( – MyName Aug 09 '13 at 16:42
`$(...)` is an alias of `jQuery(...)`. Pass function to `jQuery` means `$(function(){...})` which is the same as `jQuery(function() {...})` and the shorthand for `jQuery(document).on('ready', function() {...})` - that actualy binds your callback function to ready event of document. – Vadim Aug 09 '13 at 17:38
I put the code at the end of the body but still not working, do not know what is wrong. :( – MyName Aug 09 '13 at 19:53
@NajlaJubran Have you take a look at console? Are there any errors that prevent rest of the JavaScript from running? Are you sure jQuery and plugin are loaded? By the way, I have updated the post with example of second approach. – Vadim Aug 09 '13 at 20:05
GET http://127.0.0.1:8080/Img_loading/public/jquery.js 404 (Not Found) pic.php:7 Uncaught ReferenceError: jQuery is not defined jquery.lazyload.js:227 Uncaught ReferenceError: $ is not defined pic.php:23 – MyName Aug 09 '13 at 20:29
Okay it is working now, after I added the jgquery.js file to my doucument. But the problem I have now is that the pics looks blured just as the example you posted to me at the first.Any idea about how to solve this problem? – MyName Aug 09 '13 at 20:47
@NajlaJubran pictures will not be blurred if you will specify their real size in the `width` and `height` attributes of `` tags. – Vadim Aug 09 '13 at 21:04
I have specified the width and height but only the first two pics appear normal the others are blured. – MyName Aug 09 '13 at 21:28

PJ Brunet · Answer 2 · 2015-01-21T04:00:13.673

If you ask me, it's easier to avoid a plugin and do the lazy loading yourself.

Your images should have a format like this:

<img id="lazyimg123" src="loading.gif" data-img="http://bigimagehere.jpg" />

After some event fires (scroll, click, whatever) change the image attribute:

var whichimage = "#lazyimg123"; // find some specific image
$("[id^=lazyimg]").attr({
    'src' : $(whichimage).data("img")
});

That should get you started. You just change the image attribute and the image loads like magic.

I'm using this method here http://ProductInterest.com

my picture are not displayed using lazy load

2 Answers2