How it should look if there is also a function?

Question

How it should look if there is also a function?

Hello. Can you please tell me how to change the script, so you can work with the condition "if then" for the following functions:

-- Jquery ---

$(document).ready(function(){
 $('.photo li').waitForImages(function() { // Function which monitors whether the loaded image.
if($(this)){
 $(this).show(); // if the picture is found, the element which is displayed with the picture.
}else{
 $(this).remove(); // if not, remove the item.
}
});
});

-- CSS --

.photo:nth-child(1) li:nth-child(1) {background: url("../img/cake.jpg") no-repeat;} - this picture is.
.photo:nth-child(2) li:nth-child(1) {background: url("../img/caked.jpg") no-repeat;} - this is not.
.photo:nth-child(3) li:nth-child(1) {background: url("../img/cakef.jpg") no-repeat;} - this is not.
.photo li {
 display: inline-block;
 border: 1px solid black;
 width: 270px;
 height: 200px;
}

-- HTML --

<ul class="photo">
<p></li>
</ul>
<ul class="photo">
<p></li>
</ul>
<ul class="photo">
<p></li>
</ul>

nikita.Stracke asked July 4th 19 at 23:43

Related questions

More answers about "How it should look if there is also a function?"

2 answers

nikita.Stracke answered on July 4th 19 at 23:47

Thank you Denis for the prompt reply, the script works, thank you!

simone.Smith77 answered on · Accepted Answer · 2019-07-04T23:45:44.108Z

simone.Smith77 answered on July 4th 19 at 23:45

Solution

So

$(document).ready(function() {
 $('.photo li').waitForImages(function() {
 $(this)[$(this).length ? 'show' : 'remove']();
});
});

but here we must see the function waitForImages to be sure that it will work. And while I'm gnawing doubt, because the method is not applied to the image, and the LI element. If inside the callback function this refers to it, it will always work show()

UPD Try this option:

$(function(){
 $('.photo li').waitForImages({
 each: function(loaded, count, success) {
 $(this)[success ? 'show' : 'remove']();
},
 waitForAll: true
});
});

An example in the sandbox. The second image does not exist

Changed the script, but nothing changed. waitForImages is even a separate script that detects the loaded whether the picture is either in the img or through css (I have it loaded via css). A page this script: https://github.com/alexanderdickson/waitForImages - nikita.Stracke commented on July 4th 19 at 23:48

Downloaded the full version: anatolyrain.ru/test/js/jquery.waitforimages.js - nikita.Stracke commented on July 4th 19 at 23:51

: added in the response - simone.Smith77 commented on July 4th 19 at 23:54