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

Answer 1

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