原生javaScript实现图片延时加载的方法_javascript技巧
程序员文章站
2022-05-03 12:33:50
...
本文实例讲述了原生javaScript实现图片延时加载的方法。图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下。
图片延迟加载
首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码。
图片延时加载原理
图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:src=”img/loading.gif” data-url=”img/1.jpg”,然后通过js判断浏览器滚动条事件,达到某处的时候把自定义属性里面的图片真实地址赋给当前img标签的src,从而实现图片动态的显示。在真正的项目中,这些图片的地址可以通过ajax传递过来,赋给img的自定义属性。
原生JS实现图片延时加载实例:
文字内容看起来终究有些枯燥,我写了一个简单的demo,现在把全部代码贴出来,需要的朋友可以直接复制过去,看一下代码就明白了。
复制代码 代码如下:
希望本文所述对大家的javascript程序设计有所帮助。
上一篇: VC判断文件目录是否存在
下一篇: 如其防止ip伪造
推荐阅读
-
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
-
原生javascript实现读写CSS样式的方法详解
-
在JavaScript应用中实现延迟加载的方法
-
JavaScript实现图片懒加载的方法分析
-
Jquery实现图片预加载与延时加载的方法教程
-
原生JavaScript来实现对dom元素class的操作方法(推荐)
-
用原生JavaScript实现jQuery的$.getJSON的解决方法
-
jQuery实现动态加载(按需加载)javascript文件的方法分析
-
基于dataset的使用和图片延时加载的实现方法
-
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析