Implémenter le chargement paresseux de jquery et revenir en haut

Cet article vous apprend comment implémenter le chargement paresseux de jquery vers le haut.

Comment déterminer si un élément apparaît dans la plage visible de la fenêtre (entre les bords supérieur et inférieur du navigateur, visible à l'œil nu). Écrivez une fonction isVisible à implémenter

function isVisible($node){    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){            return true;
        }else{            return false;
        }
}

lorsque la fenêtre défile, pour déterminer si un élément apparaît dans la plage visible de la fenêtre. Imprimez fidèlement à la console à chaque fois que cela se produit. Utilisez le code pour implémenter

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            console.log(true);
        }else{            console.log(false);
        }
    });
}

isVisible($node);

Lorsque la fenêtre défile, déterminez si un élément apparaît dans la plage visible de la fenêtre. Imprime true sur la console lorsque l'élément apparaît pour la première fois, et aucun traitement ne sera effectué lorsqu'il réapparaîtra. Quel est le principe du chargement paresseux des images

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            if(!$node.attr("data-sc")){                console.log(true);
                $node.attr("data-sc",true); 
            }else{                return;
            }
        }else{            return;
        }
    });
}
isVisible($node);

à l'aide de code ?

Lorsque la page se charge, pointez l'adresse img de la page vers une petite image blanche identique et mettez la véritable adresse de l'image dans l'attribut personnalisé créé, tel que :

<img src="small.png" data-src="true.png">

src est l'adresse miniature, data-src est la vraie adresse.
Lorsque l'image apparaît dans la zone visible de la fenêtre, attribuer l'adresse réelle de l'image dans l'attribut personnalisé à src est le principe de mise en œuvre du chargement paresseux.

Cet article explique jquery Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations connexes :

Questions connexes à ce sujet

Tableaux JS, chaînes et fonctions mathématiques

À propos des objets temporels JS et des problèmes de récursivité

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!