Lazy Loading Component Load

Question

I'm building a news website with C# and MVC5. I also use MsSQL. In this project I made everything as a partial view and when I need, I call the component and put it into needed section.(binding components to sections from db etc.)

Now I'm almost done and I've come performance issues. One of them is lazy loading from jquery.

I scroll the web page through the bottom, on main section lazy load works but on the right hand side, there are components (like, most read news, most commented news) They do not lazy load until scrolling of main section ends. After finishing scrolling on main section, on the right side, components images start to come.

How can I get fix this?

EDIT: I use; jquery.lazyload.js and in the views (cshtml) I make my img tags like this;

<img class="lazy" src="/assets/img/lazyload.gif" data-original="blabla.jpg"/>

Answer 1

I looked at the documentation from Jquery.Lazyload and found the following:

When Images Are Not Sequential After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting.

$("img.lazy").lazyload({
    failure_limit : 10
});

Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high. Worst case being the actual number of images.

Source: http://www.appelsiini.net/projects/lazyload

---

I therefor assume that your sidebar is defined in the bottom of your html page and therefor not loaded until you scroll down.

---

Small update:

In the documentation is the following tip: since you do not define a width/height in either html or css it might not work properly in all browsers.

PRO TIP! You must set image dimensions either as width and height attributes or in CSS. Otherwise plugin might not work properly.

Source: http://www.appelsiini.net/projects/lazyload