Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

New appended Images are not shown properly and Exiting also disappears for some time

I have main image container. 10 images (different size boxes) are shown in it properly for the first time with isotope. After I tried to append new images on page scroll again with different size boxes, new images are not shown properly and page shows white background. Also some part of each existing 10 images get hidden(not shown properly) until all images gets shown properly.

I have my to resolve this issue within two days. Can someone help me out...????????

Find the attached view while appending.enter image description here

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 19:35 UTC

$10


  • isotope
    scroll
    isotope-on-append
  • 1272 Views

15 Replies


can you give a url for this?

This could be a browser + hardware issue

see here http://productforums.google.com/forum/#!msg/chrome/KWBMoDDUGUk/DuIOXQPOXVUJ

which basically says that the checkered background is caused by the GPU handling of images.

if you go to chrome://flags and disable GPU compositing of images it should be resolved

User Gravatar

guyisra

Posted Nov 29 2013 21:21 UTC

ya but its official web site and yet to launch. So i can not give you url but i can explain and give snap shots.

And if chrome://flags and disable GPU compositing of images, its not working as getting Hanged.

Can you give another solution..???

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 21:35 UTC

does it behave the same in other browsers? firefox? safari?

User Gravatar

guyisra

Posted Nov 29 2013 22:35 UTC

yes! I tried searched isotope but didn't found why it is happening.

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 22:43 UTC

can you show your code?

User Gravatar

guyisra

Posted Nov 29 2013 22:44 UTC

ya but its big project and code is divided in various files. I can give you code of my template render on scroll. here it is:

if(data.length > 0){ var patern = set_isotop_pattern_length(data.length, data); var j = 0; // $.each(data, function(i, value) { //console.log('in loop', {'data' : value, 'event_id' : parent_episode_id, 'patern' : patern[j]}); var $newItems = $('#show_all_event_items_tmpl').render({'data' : data[0], 'event_id' : parent_episode_id, 'patern' : patern[j++]}); $('.content-main .concealed-images #isotope-container-images').append( $newItems ); $('.content-main .concealed-images #isotope-container-images').isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); //add_isotop_pattern_for_memory(value.id); //}); } else{ $('#isotope-container-episode').find('.show-episode-detail[id="' + parent_episode_id + '"]').attr('dir', 'stop_ajax'); } scroll_flag = 0; end_limit += end_limit;

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 22:49 UTC

Hi adityaagrawal9960,

If the your website is private and the code is complex, may I suggest to turn this into a private question? This way only you and guyisra can see the content and perhaps then you would be able to provide him with a private link to your website.

If you are interested please let me know and I will take care of that. You can also contact me at dror@codersclan.net

Thank you!

Dror

User Gravatar

CodersClan

Posted Nov 29 2013 23:03 UTC

@ Dror, Thanks but i am only senior developer and i am not authorized for such activity like providing url or code.

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 23:07 UTC

@guyisra I have appended a button at bottom like SHOW MORE and on click of that i again rendered same template, then it works better. But this not the way i need. While I scroll page images are fetched from DB, isotope applied and appended-i have done like this. I just need to fetch images on scroll and then append them with smooth effect and not as I have shown in attachment which makes user to wait and screen is not shown.

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 23:15 UTC

you can try using imagesLoaded plugin which is included with isotope such as

$container.imagesLoaded(function(){
  $container.isotope(append($newitems));
});

doing this would append the items only after the image has been loaded by the browser, which may eliminate the "wait" of the browser for the image

User Gravatar

guyisra

Posted Nov 29 2013 23:21 UTC

I am already using the same but I have applied it for only newly appended images. Here it is:

$('.content-main .concealed-images #isotope-container-images').isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); $('.content-main .concealed-images #isotope-container-images').isotope('reLayout'); $('.show-event-item-detail[id=' + id + '] data-original').imagesLoaded(function(){ $(this).cjObjectScaler({ destElem: $(this).parent().parent(), method: "fill"}); $(this).removeClass('dnone'); });

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 23:28 UTC

try applying the imagesLoaded on the isotope container

User Gravatar

guyisra

Posted Nov 29 2013 23:30 UTC

Effect got little different but still the same..see the attached image.enter image description here

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 23:41 UTC

its hard to understand what is going on without code or some sample page to debug with

can you should a screenshot with firefox?

User Gravatar

guyisra

Posted Nov 29 2013 23:45 UTC

in firefox scroll is not working and with same code in chrome scroll is working.

User Gravatar

adityaagrawal9960

Posted Nov 29 2013 23:55 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions