一个网站建设爱好者,技术交流,相互学习
当前位置:首页>>程序猿
这个应该是最简单图片懒加载了吧
发布时间:2021-11-16 10:28:47 栏目:程序猿 阅读量:1512 作者:webcms

这个应该是最简单的懒加载方式了吧……

<script type="text/javascript">
   /*懒加载*/
var isInitImg = false;
function initImg() {
    if (isInitImg) {
        return;
    }
    isInitImg = true;
    $.each($('img'), function(i, item) {
        var srcValue = $(item).attr('data-src');
        if (srcValue) {
            $(item).attr('src', srcValue);
        }
    });
}
$('document').ready(function() {
    initImg();
});
// 某些firefox不触发dom ready
var str1 = 'set';
var str2 ='Time';
var runScript3 = str1 + str2+'out(function() {initImg();}, 1500)';
eval(runScript3);
</script>

说明: 在img标签里面添加自定义属性  data-src  在这个属性里面放图片的真实路径,比如:

<img  src=""  data-src="images/1.jpg"  />

   在页面有比较多或者比较大的图片或者可能会比较严重影响页面加载的图片上面使用这个。


评论:

IT视频教程
Copyright © web小工匠 保留所有权利. 渝ICP备15008469号 网站地图