zoukankan      html  css  js  c++  java
  • html图片懒加载,原理+demo

    原理都一样;

    就是把Img标签的src属性先复制给自定义属性,然后js判断滚动到该屏幕的时候在把自定义属性的图片地址赋值给src属性;

    具体操作步骤如下

    1. 把img标签中的src属性删掉, 此时, 添加属性 data_src, 把图片链接放在该属性下

    2. 通过使用img标签添加背景图片, 充当懒加载前的显示图片

    3. 当该img标签在浏览器显示区内时, 通过js实现把img标签 中的data_src的链接赋值到img标签中的src属性
    注: 浏览器显示区如何判断

    js这样写:

    // 判断页面是否到了需要显示图片的位置并赋值
    function loadlazy(){
        var itv = setTimeout(function(){
            var winHeight = $(window).height();
            var scrolltop = $(window).scrollTop();
            $('img').each(function(){
                var oTop = $(this).offset().top;
                if((oTop-scrolltop) >= 0 && (oTop-scrolltop)<winHeight){
                    var src = $(this).attr("data_src");
                    $(this).attr("src",src);
                }
            })
        },100);
    }
    
    // 页面滚动加载
    $(window).scroll(function() {
        loadlazy();
    });

    简单明了的图片懒加载!

  • 相关阅读:
    每日博客
    每日博客
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
  • 原文地址:https://www.cnblogs.com/ffyun/p/14036115.html
Copyright © 2011-2022 走看看