dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 354 forks source link

Do something after ajax request + append #39

Closed Tazintosh closed 9 years ago

Tazintosh commented 9 years ago

Hi dinbror,

After having successfully used your nice script in a test file, I'm actually trying to use it on a specific part of my website. When a user visit my portfolio, he lands on a page with a basic introduction text, so that while he's reading, I'm loading the full portfolio in ajax and then display it. I would like BLazy to run after my ajax request, so it can handle the class of the new added images.

Here's a simplified version of my code:

function display_page(page_num){
    //Some code here will append a list of links + images etc. to a container of my website on ajax request success
}

$.ajax({
    url: ajaxURL,
    type: 'GET',
    dataType : 'json',
    data: {"action": "get_portfolio_data", "cat": cat, "excludedCat": excludedCat}
})
.done(function(data){
    //Some code
    display_page(cur_page);
}).then(function(){
    var bLazy = new Blazy({ 
        selector: '.taz_portfolio-item-visual',
        success: function(ele){
            console.log('OK!');
        },
        error: function(ele, msg){
            if(msg === 'missing'){
                console.log('Image is missing');
            }
            else if(msg === 'invalid'){
                console.log('Image is invalid');
            }
        }
    });
}).then(function(){
    taz_imageProtect(); // Prevent Right Click
}).then(function(){
    taz_adaptLargeImagesHeight(); // Adapt Images Size
}).then(function(){
    taz_imageZoom(); // Detect images that can be zoomed
}).then(function(){
    taz_detectExifAreas(); // Detect EXIF area on images
});

I've been able to find out that at this point, BLazy do not find the new appended ".taz_portfolio-item-visual" elements and then never enter to success or error. If (just for the test), I use "body" as selector, console.log clearly display it's invalid message. Note that all the last functions added with .then() are perfectly working and are based on elements only present on the appended code.

Thanks in advance for your help!

dinbror commented 9 years ago

Hey Tazintosh.

Do you have a live example? Just for the test could you try to add 'img' as selector? What are you doing in the display_page function? Maybe the ajax request is done before the display_page function is done with everything

Tazintosh commented 9 years ago

Hi dinbror, I had to switch to unveil.js, sorry.

dinbror commented 9 years ago

No problem