Tagged: , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 8, 2014 at 4:33 pm #261859
    WEBIGAMI

    Hi kriesi-team,

    I’m almost finished with another Enfold-project and have the following issue:

    My client claims, that images are not loading (immediately) when she scrolls down the site. The images should load in the moment, the content is visible in the browser.:

    http://webigami.de/guth/kunst/figurative-malerei/

    Please advise asap. I need to go online tomorrow.

    Thanks and cheers,
    Jan :)

    May 9, 2014 at 4:59 am #262128
    Ismael

    Hi jansthh!

    Thank you for using the theme!

    I’m not sure if we can do anything about the images not loading immediately because it will depend on the internet speed and hosting plan. You can try to optimize the website with the following steps courtesy of the wordpress community:

    1. Optimize all images with AI/Photoshop before uploading to server ‘save as web safe’ jpg
    2. Once all images are on the website optimize with ewww optimizer plugin twice 1hr 10mins apart.
    3. Install wp-smushit run once to remove jpeg extra data, then uninstall.
    4. Use BWP minify plugin to minify scripts and stylesheets.
    5. Install WP-Super cache, select all recommended settings.
    6. Logout your website, visit every page at least once to create super cache files.
    7. Join Cloudflare setup your website on their CDN, Choose options: Full CDN Optimisation save then activate purge files. once done log out.
    8. Have a cup of coffee.
    9. Visit your site after 20 minutes or so.
    10. Don’t forget to smile.

    Aside from the suggestions above, usually minimizing the image sizes and number of plugins that you install will greatly improve the performance.

    Cheers!
    Ismael

    May 9, 2014 at 10:33 am #262289
    WEBIGAMI

    Hi Ismael,

    thank you for that. But it’s not about the speed. It’s about the point of scrolling down. If I don’t go down further at some masonry galleries, they won’t load at all (try further down “Nachrichten aus der Wirtschaft” on http://webigami.de/guth/kunst/figurative-malerei/ and scroll with normal user speed).

    Is there any chance you can give me a quick css through that tha masonry galleries will load earlier (not more quickly) when scrolling down a page with several masonry galleries?

    I appreciate your help.

    Cheers,
    Jan

    May 12, 2014 at 2:30 pm #263278
    Devin

    Hey!

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    
.avia_sortable_active .isotope, .avia_sortable_active .isotope .isotope-item {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;    
}
.avia_desktop.csstransforms3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: avia_msonry_show 0.0s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); /* Safari 4+ */
-moz-animation:    avia_msonry_show 0.0s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); /* Fx 5+ */
animation:         avia_msonry_show 0.0s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); /* IE 10+ */
}

    Regards,
    Devin

    November 16, 2016 at 2:47 pm #712904
    norbou

    Hi there,
    I have the probably same problem.
    If I use more galleries on one page, there is a problem with scroll detection.
    Bottom galleries are loaded too late, after you scroll much more under the top of gallery itself.
    I have added the code above, but it doesn’t help.
    I disabled animations and also without results.
    My browser is Firefox (latest), but in Chrome is it the same.
    This problem is dependending on image arrangement in the gallery. When I optimized galleries to minify the overflowing orphand on the last row, I made the situation better!
    But please, because we want to use generaly this kind of gallery on thi site, check the javascript which is measuring the height of all elements or tell me how to load all at once like without scrolling down.

    • This reply was modified 7 years, 5 months ago by norbou.
    November 19, 2016 at 6:19 am #714261
    Ismael

    Hey!

    Please add the following script in the functions.php file. It will prevent the gallery images from overlapping.

    add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 1500);
	
	$(window).load(function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 2000);
	});
})(jQuery);
</script>
<?php
}

    Cheers!
    Ismael

    November 20, 2016 at 10:07 pm #714601
    norbou

    Hei Ismael, yor soulution works like a knife! Perfect.
    Will be this code part of actualisation or I have to add this after future updates?
    Thanks, Jiri

    November 21, 2016 at 5:37 am #714651
    Rikard

    Hi Jiri,

    You should not have to add it after every update if you use a child theme: http://kriesi.at/documentation/enfold/portfolio-item/create-a-child-theme/

    Best regards,
    Rikard

    January 14, 2020 at 1:34 am #1173009
    Cloudypro

    Hi Ismael (& Norbou)

    I have an issue which i am asking if it is the same issue presented in this topic
    I am using a Masonry that displays around 50 products
    Sometimes when i scroll down, the product images get overlapped and show as if they are cut out, i can only see quarter the image or a bit less sometimes.
    This gets solved when i “Restore Down” the internet browser window and Maximize it again somehow.

    After using this code, i am no longer seeing the issue, however, the issue did not usually happen all the time before i used this code, so i am not sure if the code solved the issue or not ! ???

    Thank you !

    January 14, 2020 at 4:47 pm #1173437
    Ismael

    Hi,


    @Cloudypro    : Where can we check the masonry element? Do the images overlap on page load? If they do, then the script above should re-adjust the images every few seconds until all of them are fully loaded.

    Best regards,
    Ismael

    January 14, 2020 at 6:01 pm #1173515
    Cloudypro

    Hi @Ismael

    I think it is working perfectly for now ! (Website is under maintenance at the moment)

    Thank you !

    January 15, 2020 at 7:19 am #1173809
    Jordan Shannon

    Hey Mohamad,

    Did you need additional help with this?

    Best regards,
    Jordan Shannon

    January 15, 2020 at 8:51 pm #1174668
    Cloudypro

    @Jordan Shannon

    Thank you .. Everything is great
    You guys are amazing !
    We can close the topic

    January 16, 2020 at 9:45 am #1174797
    Ismael

    Hi,

    Awesome! Glad we could help. Please don’t hesitate to create a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Masonry Image Load Issue’ is closed to new replies.