基于jquery的图片懒加载js

function lazyload(option){
var settings={
defObj:null,
defHeight:0
};
settings=$.extend(settings,option||{});
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
var pageTop=function(){
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
};
var imgLoad=function(){
defObj.each(function(){
if ($(this).offset().top<=pageTop()){
var src2=$(this).attr("src2");
if (src2){
$(this).attr("src",src2).removeAttr("src2");
}
}
});
};
imgLoad(); 

// 绑定滚动事件
$(window).bind("scroll",function(){
imgLoad();
});
} 

lazyload({
defObj:"#plist"
}) 

原文地址

时间: 2024-12-30 03:40:30

基于jquery的图片懒加载js的相关文章

使用jQuery实现图片懒加载原理

原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量. 所以,淘

jQuery lazyload 图片懒加载实现

现在网站页面内容越来越丰富,图片内容也越来越多,而图片过多会导致网页文件过大,从而引发加载缓慢的问题,而图片懒加载就是为解决这一问题而生. 首先我们来讲Jquery的懒加载控件  jQuery lazyload.JS jQuery lazyload.JS 地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接复制源码到本地 jQuery lazyload.JS是用 jQuer

jQuery插件图片懒加载lazyload

来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可 见)中的图片是不加载的,这样势必会引起速度上质的提升. 实现原理: 当图片滚动到可视区时将图片加载进来. 图片不在可视区判断: (一):图片距离页面顶端的高度 大于 窗口可视区的高度+window滚动条的scrollTop. (二

jQuery.imgLazyLoad图片懒加载组件

一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad:使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址. 二.应用实例demo /** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(

jQuery实现图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

基于jQuery的图片异步加载和预加载实例

如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时,其他图片才会加载,改插件很好地实现了图片异步加载功能. 在线预览   源码下载 html代码部分: <div id="content"> <div id="button"> <ul> <li>小图</li>

前端插件实现图片懒加载

一.echo.js: 我们在开发页面的时候肯定会遇到图片比较多的时候,虽然我们可能有图片分布式的服务器,但是在客户端还是会有很大的性能开销.为了用户体验,特别是对首屏加载速度要求很高的,通常我们会考虑图片延时加载,lazyloading这款插件已经能很好地实现这一功能,可是是基于jQuery,对于移动端可能不太实用.一个非常简单实用叫echo的插件,3k左右特别适合移动端使用.步骤如下: 1.在页面中需要引入echo.css和echo.min.js 2.对需要进行延迟加载的图片采用如下写法: <

图片懒加载lazyload

图片懒加载:jquery && jquery-lazyload 图片懒加载是一种前端性能优化方案:随着视图区的滚动,加载剩下的图片,这样当滚动条没有滚动到下面的时候,图片不加载,减少资源浪费 原本:<img src="images/img1.jpg" > 懒加载:<img class="lazy" data-original="images/img1.jpg" > <script type="

图片懒加载--lazyload.js的用法

这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么解决这个问题呢?jQuery插件库中有个插件lazyload.js可以实现图片懒加载. lazyload.js的原理就是将真正要加载的图片的地址放在另一个属性中,而图片的src的地址则是一个1px *1px的占位图,这样在网页加载过程中,首先下载的是这个占位图,当网页加载完成后,下拉页面时再下载在可