jQuery load images from external file with lazy load plugin

Question

I'm using Lazy Load Plugin for jQuery to load imgs when page is scrolled. Additionaly I want to load images from gallery to container while user clicks an anchor (to prevent from unnecessary content loading), by .load() function:

$('#category_1').load('gallery.php?a=1');

My problem is fact, that .load() function strips <script> tags from loaded content, and images cannot load using Lazy Load plugin.

<img src="blank.gif" data-original="img.png" alt="img" />
<script> $('img').lazyload({ effect : 'fadeIn' }); </script>

So, I just thought that I can put <script> tags in file where content is loaded, but it doesn't work.

Is anybody meet that kind of issues? Greetings

The .load() method does strip out <script> blocks but it does execute them. — Pointy
– Pointy, Commented Oct 29, 2012 at 14:56
But it doesn't execute them properly, nothing happens anyway. — L24
– L24, Commented Oct 29, 2012 at 15:03
Then there must be some other problem. It executes them perfectly well in my experience. — Pointy
– Pointy, Commented Oct 29, 2012 at 15:10
I just put <img> in gallery.php, after tag put lazyload script, and load gallery.php in index.php to my container, I can't see mistakes too, but It's not working :( — L24
– L24, Commented Oct 29, 2012 at 15:15
I heard about .on() and .delegate() functions, but I cannot use them in this case. — L24
– L24, Commented Oct 29, 2012 at 16:12

jperelli · Accepted Answer · 2012-10-30 16:17:43Z

2

How about adding a callback function to .load?

$('#category_1').load('gallery.php?a=1', function() {
   $('#category_1 > img').lazyload({ effect : 'fadeIn' });
});

update
looking at the code you posted on pastebin, it would be on index.php, line 14:

$("#loadpic").click(function() { 
    $("#page").load ("gallery.php", function() {
        $("#page").find("img").lazyload({ effect : "fadeIn", skip_invisible : false });
    });
});

as the doc says (at the very bottom), add skip_invisible:false to solve your problem

and there would be no javascript on gallery.php

edited Oct 30, 2012 at 16:17

answered Oct 29, 2012 at 15:05

jperelli

7,2276 gold badges54 silver badges88 bronze badges

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

4 Comments

L24 Over a year ago

Still nothing, image is represented by graytext in firebug so it's still hidden.

jperelli Over a year ago

I updated the answer according to the code you posted on pastebin (the find part). Let me know if it helps you.

L24 Over a year ago

Thank you for your response, I wrote src attribute in image tag to check that content loads at all, and it is, but Lazy load plugin replaces what is under source attribute by data-original attribute content, and it's still not working. I heard about .delegate() function that executes script on elements dynamically inserted to DOM, but I can't write actual code in this issue.

jperelli Over a year ago

did you tried this? $("img.lazy").lazyload({skip_invisible : false});

songpham · Accepted Answer · 2012-10-29 15:29:29Z

0

maybe you need yepnopejs to control load order

answered Oct 29, 2012 at 15:29

songpham

551 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery load images from external file with lazy load plugin

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related