jquery实现页面按条件显示图片

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"
})

jquery实现页面按条件显示图片

时间: 2024-10-23 19:39:13

jquery实现页面按条件显示图片的相关文章

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

Spring MVC 上传、下载、显示图片

通过这篇文章你可以了解到: 使用 SpringMVC 框架,上传图片,并将上传的图片保存到文件系统,并将图片路径持久化到数据库 在 JSP 页面上实现显示图片.下载图片 [TOC] 1. 准备工作 首先我们需要准备好开发环境,本文测试环境是 SSM(Spring 4.3.9 + SpringMVC 4.3.9 + MyBatis 3.4.4) ,数据库为 MySQL 5.5,数据库连接池 C3P0 0.9.5.2,构建包 Maven 3.5.0,Tomcat 8.5. 限于篇幅原因,关于 SSM

jQuery oLoader实现的加载图片和页面效果

oLoader使用方法 不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载. 调用jQuery oLoader非常简单,一句话如下: [js] view plaincopy $('#element').oLoader(); 使用oLoader加载图片: [js] view plaincopy $(function(){ $('img').oLoade

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

jquery html5 file 上传图片显示图片

最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片.在网上找了很多资料也未能如愿,如是,就用jquery ,html5,实现了,由于开发是在linux 所以未能在ie下测试,在forefox,chrom下是可以的. 一.html下的代码是: <div class=' input_box' > <span class='spac' >头</span>相:<input class="input_style" id="'head

jquery实现的随机显示图片效果代码

jquery实现的随机显示图片效果代码:下面介绍一下,点击按钮就可以实现图片的随机切换效果,代码实现非常的简单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <tit

关于51CTO学院页面不显示图片的问题

前几天打开51CTO学院页面,只能看到文字,所有图片都不显示,换了几个浏览器也不行,台式机.笔记本也轮番试了一遍,还是不显示图片. 开始以为是学院网站的问题,但是问了其他小伙伴都说能正常显示,有的说是不是我的网速问题,但是我用的是30M光纤宽带应该没问题呀,测试宽带速度也正常呀.再说,我打开其他的网站图片都能正常显示,肯定不是网速的问题. 一直被困扰了好几天,昨天晚上百度了一下,在知乎上终于得到答案,有的小伙伴用知乎,知乎上的图片一律不显示,有热心小伙伴回答,说是移动宽带的问题,把DNS改成11

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

基于Jquery插件Uploadify实现实时显示进度条上传图片

网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下 先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支