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"/>

Show us the code / how html is structed / how you lazy load

SynerCoder
– SynerCoder

2014-03-27 12:41:26 +00:00
Commented Mar 27, 2014 at 12:41 — SynerCoder
– SynerCoder, Commented Mar 27, 2014 at 12:41
can you check the edit.

Kuthay Gumus
– Kuthay Gumus

2014-03-27 12:58:56 +00:00
Commented Mar 27, 2014 at 12:58 — Kuthay Gumus
– Kuthay Gumus, Commented Mar 27, 2014 at 12:58

SynerCoder · Accepted Answer · 2014-03-27 13:05:10Z

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

answered Mar 27, 2014 at 13:05

SynerCoder

12.9k5 gold badges51 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kuthay Gumus Over a year ago

Firstly, thanks for the answer.I'm trying it right now. Failure_Limit:10 did not changed anything, now i will try to placing them not to bottom.

SynerCoder Over a year ago

If you have more then 10 images in your pages before your sidebar it wont work. But let me know

SynerCoder Over a year ago

Try it with a super high number, for example with 9999, if it still not works, it is something else

Collectives™ on Stack Overflow

Lazy Loading Component Load

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related