图片的懒加载问题-html教程-PHP中文网

首页

web前端

html教程

图片的懒加载问题

巴扎黑

Jun 26, 2017 pm 03:18 PM

加载图片问题

我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。

我们在写网页的时候怎么解决这个问题呢？这时候就要用到我们图片懒加载的问题，这样不仅可以

解决流量问题，也提高了性能等等。

下面我们就来看一下图片的懒加载怎么问题。

<span style="font-size: 18px"><!DOCTYPE html></span><br><span style="font-size: 18px"><html lang="en"></span><br><span style="font-size: 18px"><head></span><br><span style="font-size: 18px">    <meta charset="UTF-8"></span><br><span style="font-size: 18px">    <title>Title</title></span><br><span style="font-size: 18px">    <style></span><br><span style="font-size: 18px">        *{</span><br><span style="font-size: 18px">            margin: 0;</span><br><span style="font-size: 18px">            padding: 0;</span><br><span style="font-size: 18px">            list-style-type: none;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">        html,body{</span><br><span style="font-size: 18px">            width: 100%;</span><br><span style="font-size: 18px">            height: 100%;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">        #div div{</span><br><span style="font-size: 18px">            width: 400px;</span><br><span style="font-size: 18px">            height: 500px;</span><br><span style="font-size: 18px">            /*border:1px solid #000;*/</span><br><span style="font-size: 18px">            display: inline-block;</span><br><span style="font-size: 18px">            margin:10px;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">        img{</span><br><span style="font-size: 18px">            width: 100%;</span><br><span style="font-size: 18px">            height: 100%;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">    </style></span><br><span style="font-size: 18px">    <script></span><br><span style="font-size: 18px">        // 获取距离父级距离</span><br><span style="font-size: 18px">        function getPos(obj) {</span><br><span style="font-size: 18px">            var t=0;//先声明两个变量  用来存储距离上面的高度  距离左边的高度</span><br><span style="font-size: 18px">            var l=0;</span><br><span style="font-size: 18px">            while (obj){//循环判断这个元素是否存在，存在才执行这个方法</span><br><span style="font-size: 18px">                t+=obj.offsetTop; // 加上距离父级的距离</span><br><span style="font-size: 18px">                l+=obj.offsetLeft;</span><br><span style="font-size: 18px">                obj=obj.offsetParent;// 有父级让他变成他的父级</span><br><span style="font-size: 18px">            }</span><br><span style="font-size: 18px">            return {left:l,top:t}; //把值传出去</span><br><span style="font-size: 18px">        }</span><br><br><span style="font-size: 18px">        window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样</span><br><span style="font-size: 18px">            var aImg=document.getElementsByTagName('img');//获取所有的元素img元素</span><br><span style="font-size: 18px">            var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度</span><br><span style="font-size: 18px">            var oClh=document.documentElement.clientHeight;//可视区的高度</span><br><span style="font-size: 18px">            var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度</span><br><span style="font-size: 18px">            for(var i=0;i<aImg.length;i++){ //循环所有的img，把它距离页面顶部的距离 和  滚动高度+可视区的高度进行比较</span><br/><span style="font-size: 18px">                if(oScr > getPos(aImg[i]).top){</span><br><span style="font-size: 18px">                    aImg[i].src=aImg[i].getAttribute('_src');  //给src属性赋值</span><br><span style="font-size: 18px">                }</span><br><span style="font-size: 18px">            }</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">    </script></span><br><span style="font-size: 18px"></head></span><br><span style="font-size: 18px"><body></span><br><span style="font-size: 18px">    <div id="div"></span><br><span style="font-size: 18px">        <div><img _src="img/1.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/2.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/3.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/4.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/5.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/6.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/7.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/8.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/9.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/10.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/11.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/12.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/13.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/14.jpg"></div></span><br><span style="font-size: 18px">        <div><img _src="img/15.jpg"></div></span><br><span style="font-size: 18px">    </div></span><br><span style="font-size: 18px"></body></span><br><span style="font-size: 18px"></html><br>今天的内容就到这里，你学会了吗？</span>

以上是图片的懒加载问题的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。