`

jquery 加载完图片,获取大小

 
阅读更多
//图片插件
$(document).ready(function(){
	
	 //插件初始图片显示
	 var initialVal=$('input:radio[name="radiobutton"]:checked').val();  
	 if(initialVal!=null){  
	 	  var strs= new Array(); //定义一数组
	 	  strs=initialVal.split(","); //字符分割     
          $("#showPic").attr("src",strs[0])
          $("#showPic").load(function() {
			//全部图片加载完成时….. 
			  $("#w").html($("#showPic").width());
              $("#h").html($("#showPic").height());
			});
          
         
          
      	}  
	 //选择图片
	 $('.radioChange').change(function(){     
		var val=$('input:radio[name="radiobutton"]:checked').val();  
	 	if(val!=null){
	 	  var strs= new Array(); //定义一数组
	 	  strs=val.split(","); //字符分割     
          $("#showPic").attr("src",strs[0])
           $("#showPic").load(function() {
			  //全部图片加载完成时….. 
			  $("#w").html($("#showPic").width());
              $("#h").html($("#showPic").height());
			});
          
      	}  
      }); 
});

 

分享到:
评论

相关推荐

    jQuery无限滚动加载图片瀑布流代码

    **jQuery无限滚动加载图片瀑布流代码详解** 在网页设计中,瀑布流布局(Masonry Layout)因其独特的展示方式,能够使页面元素排列得既美观又节省空间,特别适合用于图片展示类网站。jQuery无限滚动加载图片瀑布流...

    jQuery图片懒加载代码

    - **响应式**:考虑不同设备的视口大小,确保图片在任何屏幕尺寸下都能正确加载。 - **动画效果**:在图片加载前后添加过渡动画,提升用户体验。 - **错误处理**:处理图片加载失败的情况,如提供备用图片或显示错误...

    jquery 加载图片大全

    《jQuery加载图片大全》 在Web开发中,图片的加载是一项常见的任务,特别是在构建富交互性的网站时。jQuery,作为一款强大的JavaScript库,为开发者提供了许多便利的工具和方法来处理图片加载。本文将深入探讨如何...

    JQuery控制图片大小代码

    在本主题中,我们将深入探讨如何使用jQuery来控制图片的大小,这在响应式设计或者图片适配不同设备尺寸时尤其重要。下面将详细介绍jQuery控制图片大小的基本方法和相关知识点。 1. **获取图片元素** 在jQuery中,...

    jquery图片浏览自适应大小

    当图片加载完成后,可以通过`$(img).width()`和`$(img).height()`获取图片的尺寸,然后根据这些信息调整图片容器的大小。 为了实现自适应,我们可以创建一个响应式的图片容器,比如一个div元素,它的宽度和高度设置...

    Jquery实例--图片预加载

    图片预加载的核心在于,在图片实际显示之前,提前发起请求获取图片数据。这样当用户滚动到相应位置或点击按钮显示图片时,图片已经存在于浏览器的缓存中,可以立即展示,提高了页面的响应速度。 以下是一个基本的...

    使用jQuery实现图片预加载和自动等比例缩放插件

    本教程将详细讲解如何使用`jQuery`实现图片预加载和自动等比例缩放功能,创建一个高效、响应式的图片插件。 一、图片预加载 图片预加载技术是为了提升用户体验,避免用户在浏览网页时因为图片加载缓慢而看到空白...

    jquery实现图片预加载技术,使得图片加载更为流畅,和谐。

    本篇文章将深入探讨如何使用jQuery实现图片预加载,并探讨相关的优化策略。 首先,图片预加载的基本原理是在页面加载时,提前请求图片资源,将其缓存到浏览器中,以便用户在实际查看图片时可以快速显示出来。这样...

    jQuery实现图片加载完成后改变图片大小的方法

    总结来说,通过jQuery实现图片加载完成后改变图片大小的方法是多种多样且灵活的,主要涉及到事件的监听、DOM属性的动态获取与设置、以及对特定浏览器兼容性的处理。了解和掌握这些知识点对于进行Web前端开发的人员来...

    jQuery网页图片延迟加载代码.zip

    3. 图片大小优化:对图片进行压缩,减少文件大小,加快加载速度。 4. 使用WebP或其它高效的图片格式:如果目标浏览器支持,可以使用更节省带宽的图片格式。 总的来说,这个jQuery网页图片延迟加载代码是一个实用的...

    jQuery无限加载图片瀑布流效果.zip

    3. **初始化jQuery**:在页面加载完成后,使用jQuery获取初始的图片数据,并将其插入到HTML中,同时应用瀑布流布局。 4. **监听滚动事件**:当用户滚动到底部时,发送Ajax请求获取更多图片数据。 5. **处理Ajax...

    jquery图片延迟加载

    **jQuery图片延迟加载技术详解** 在网页设计中,图片加载是一项关键任务,尤其对于内容丰富的网站,大量的图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个问题,"jQuery图片延迟加载"技术应运而生。这...

    ajax jquery 常用图片

    此外,jQuery插件如`jQuery.lazyLoad`或`Unveil.js`提供了一种延迟加载图片的方法,只有当图片进入视口时才会开始加载,这进一步优化了性能,尤其是对于有大量图片的页面。 在处理图片资源时,我们还需要考虑到响应...

    jQuery网格缩略图片点击大小缩放图片切换代码

    本主题涉及的是利用jQuery实现一个功能:当用户在网格布局中的缩略图上点击时,图片会放大并进行切换,以展示更多细节。这种效果在产品展示、照片画廊或任何需要图片预览的场景都非常常见。 首先,我们需要理解这个...

    jquery图片轮显

    - **响应式设计**:根据不同的屏幕尺寸调整图片大小和布局,确保在不同设备上都能正常显示。 #### 五、总结 通过本文的学习,我们了解了如何使用jQuery来实现图片轮显功能,包括必要的HTML结构、CSS样式设置以及...

    jQuery无限加载图片瀑布流效果.rar

    **jQuery无限加载图片瀑布流效果**是一种常见的网页设计技术,用于在网页上展示大量图片时,提供流畅且高效的用户体验。这种效果通常是通过JavaScript库,尤其是jQuery实现的,它允许图片在用户滚动页面时动态加载,...

    懒加载jquery.lazyload.js

    jQuery LazyLoad.js 的核心思想是只加载视口内(即用户当前能看到的部分)的图片或者其他指定元素,而将视口外的元素保持为占位符。当用户滚动页面,这些占位符进入视口时,插件会自动替换为真实的资源,从而实现...

    jquery 插件 经典jquery 图片代替文字

    3. **备用内容**:为每张图片提供alt属性,这样在图片无法加载时,用户仍然可以获取图片的基本信息。 4. **响应式设计**:考虑到不同设备和屏幕尺寸,图片的替换应适应各种视口大小,确保在任何情况下都能良好展示...

    Jquery 图片展示效果

    2. 图片适应性:使用 jQuery 的 `.width()` 和 `.height()` 方法,可以动态调整图片大小以适应容器。 五、图片灯箱效果 1. 弹出层:通过 `.show()` 和 `.hide()` 方法,实现图片点击后在弹出层中全屏展示。 2. ...

Global site tag (gtag.js) - Google Analytics