angular implements lazy loading of instance code for image code

The pictures that have been tangled in the past two days are lazy to load in the plug-in and cannot extricate themselves. During the use process, I deeply felt the pain of not being good at learning js. I wanted to modify the source code but would not modify it. I could only try my best to squeeze out how to use the plug-in. Here we mainly talk about some problems encountered in the process of using plug-ins.

1) I am using the angular-imglazyload plugin. 【/package/angular-imglazyload】The main reason is that this plug-in does not rely on the jquery library. After the source code is downloaded successfully, I integrated it into my project and ran it. As a result, I found that only the first 2 photos were loaded and there was no response after scrolling. Here is my code part:

<div ng-repeat="Digest in Digest_cont track by $index"> 
     <img src="" data-ui-lazyload="{{}}" onerror="='img/default@2x_300X300.png'" ng-if="=='img'" alt=""> 
     <div ng-if="=='txt'">{{::}}</div> 
    </div> 

Then the loading image is defined on css. What you will see first during loading is the picture during loading.

At the beginning, I didn’t know what was going on, so I put the html code of the looped image up layer by layer and checked it. After repeated searches, it was found that it was the positioning set by the parents and parents class: position:absolute; caused the div to be separated from the document flow. The plug-in listens for scrolling events based on Windows. The solution here is to change the positioning to relative.

Then, the loading process found that I didn’t know why the loading image did not appear. The default image that appears has always been defined by onerror. I always thought it was a problem with the plug-in, but later I changed it to use it. The root cause was found in the attribute src="". When the rendering process believes that the image cannot be found, the default image will be displayed directly. Here, just delete the src attribute to solve it.

Then I found that when some of my pictures were located in the but area, f5 refreshed the browser and found that the pictures were loading all the time and the pictures could not be displayed. Only when I scrolled down the mouse, the pictures would be loaded. I really don't know why this is, so I can only choose another plugin to use.

The final solution is to use this plugin [/JavaScript-Demos/demos/lazy-src-angularjs/】, I found that the third problem above does not exist here, and I used this plug-in decisively, the only drawback is that this requires relying on the jquery library. This plugin still listens to windows scroll events and cannot customize the scroll events. Therefore, it should be noted that the parent elements of the parent must not be absolute positioned where lazy loading is needed in future projects.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.