`
liyixing1
  • 浏览: 958763 次
  • 性别: Icon_minigender_1
  • 来自: 江西上饶
社区版块
存档分类
最新评论

js操作img元素的问题

阅读更多
原文地址:http://blog.blacklee.net/tech/783-summing-up-of-a-google-analytics-similar-project-javascript-part

以上文章是一篇关于网站流量统计的。
他遇到的问题是,小图片的请求次数和统计的js请求次数比率是6:10;

原因是只要img对象的src赋值了。那么浏览器就会去请求图片。

解决方法
将引用js的script标签从页面底部移到head标签内
JS加载完马上执行对应方法,不等document.onload完成
不再把图片往document.body上添加,但为了防止被浏览器垃圾回收,需要放到window对象内。

(function(){
  function initData(){xxx;}
  function submit(){
    var img = new Image();
    var id = "tracker-img";
    img.id = id;
    img.onload = img.onerror = img.onabort = function() { window[id] = undefined; };
    window[id] = img; // 避免img对象被浏览器垃圾回收了
    img.src = "http://www.sample.com/1.gif?" + params;
  }
  initData();
  submit();
})()

分享到:
评论

相关推荐

    关于firefox下img元素拖拽效果处理

    本文将深入探讨如何在Firefox下处理img元素的拖拽效果,同时也会涉及到一些源码分析和实用工具的运用。 一、HTML5拖放API基础 HTML5的拖放API提供了一种直观的方式来实现元素的拖放功能,允许用户通过鼠标操作来...

    Img2Blobjs是一款可以为图片添加自定义水印的jquery插件

    Img2Blob.js将图片转换为Blob对象,这是因为Blob对象在处理二进制数据时提供了灵活的操作方式,如分割、合并和转换等。 2. **水印技术**:水印是一种用于标识所有权或验证内容真实性的图形或文本,通常以半透明形式...

    zTree js css img包

    【zTree js css img包】是一个专门用于构建前端树形结构插件的资源包,它包含了一组必要的JavaScript文件、CSS样式表以及可能用到的图像资源。zTree是一款广泛应用于网页开发中的开源项目,其核心功能是创建交互式的...

    通过js给html元素赋值

    在网页开发过程中,JavaScript(简称JS)是一种非常重要的客户端脚本语言,常用于动态地控制HTML页面中的元素。本文将详细介绍如何使用JavaScript为HTML元素赋值,并探讨多种赋值方法。 #### 基础概念 在Web开发中...

    FloatImg(浮动图片js源码)

    【标题】"FloatImg(浮动图片js源码)"是一个JavaScript实现的开源项目,它采用面向对象编程(OOP)的方法来实现网页上的多图浮动效果。这个功能在网页设计中非常常见,通常用于创建动态的广告条或者吸引用户注意力的...

    js cavans截图,指定元素截图

    本文将深入探讨如何使用JavaScript结合Canvas实现指定元素的截图功能,这一技术通常用于网页分享、用户界面快照或者数据分析。我们将讨论以下几个核心知识点: 1. **Canvas API**:Canvas API是HTML5引入的一种新的...

    js操作图片等比缩放及旋转

    总的来说,JavaScript提供了丰富的功能来操作图片,包括等比缩放和旋转。通过理解基础原理并结合DOM操作,我们可以创建出具有动态效果和交互性的图片应用。在实际项目中,还可以结合现代浏览器的CSS3特性,提高性能...

    js图片自适应 不超出父元素 缺失部分背景补

    总结来说,实现“js图片自适应不超出父元素,缺失部分背景补”的目标,主要依赖于HTML的`<img>`标签或CSS的`background`属性,以及JavaScript的动态计算和事件监听。在实际应用中,需要根据项目需求选择合适的方法,...

    js注意img图片的onerror事件的分析

    通过JavaScript来动态地为img元素添加onerror事件处理器,一旦触发了onerror事件,执行一个函数,该函数可以重新设置一个有效图片的路径或者做一些其他的错误处理操作,并且可以将img元素的onerror属性设置为null,...

    求得div 下 img的src地址的js代码.docx

    总的来说,正确获取和操作img的src属性是JavaScript DOM操作的基础技能,对于构建交互式网页至关重要。在处理类似问题时,确保对HTML结构有清晰的理解,并正确地使用JavaScript选择器和属性访问方法。同时,关注性能...

    使用jQuery操作元素的属性与样式

    ### 使用jQuery操作元素的属性与样式 #### 一、摘要 本文旨在介绍如何利用jQuery这一流行的JavaScript库来操作HTML文档中的元素属性与CSS样式。对于初学者而言,掌握这些技能对于构建动态网页至关重要。 #### 二...

    js实现点击图片放大照片

    在网页开发中,JavaScript是一种非常重要的脚本语言,它能够为用户提供丰富的交互体验。本文将深入探讨如何使用JavaScript实现点击图片后放大显示的功能,以及如何创建图片的缩略图。 首先,我们需要理解JavaScript...

    元素周期表 JS实战优化版.zip

    本项目“元素周期表 JS实战优化版”就是一个很好的示例,它展示了如何利用JavaScript来构建一个功能完善的交互式元素周期表。下面我们将深入探讨这个项目的各个组成部分及其背后的知识点。 首先,`index.html`是...

    JS用Canvas元素进行HTML绘图

    Canvas通过JavaScript API提供了一系列方法,使得开发者能够以编程方式创建、修改和操作图形。这个API是基于矢量图形的,意味着图形可以无限放大而不会失真。 ### 1. Canvas元素基础 Canvas是一个HTML标签,通常以...

    js 动态添加元素(div、li、img等)及设置属性的方法

    4. 动态添加img元素:在动态添加li元素的基础上,还需要创建img元素,并设置其`src`属性为图片地址,然后将img元素添加到li元素中,最后将li元素添加到ul元素中。 5. 动态添加元素的方法总结:对于不同的HTML元素,...

    javascript动态改变img的src属性图片不显示的解决方法

    特别是对于img元素的src属性的动态改变,它能够让我们根据用户的操作来更换图片,增加页面的互动性。但有时候,尽管代码逻辑正确,却在特定的浏览器环境下出现图片不显示的问题。本文将详细讨论在IE浏览器中,当通过...

    js图片显示

    这主要涉及到HTML的`<img>`元素、JavaScript操作DOM以及对AJAX的理解。在这个主题下,我们将深入探讨如何利用JavaScript来加载、控制和处理网页中的图片。 1. **基本的图片显示** 在HTML中,我们通常用`<img>`标签...

    zTree js css img包.zip

    【zTree js css img包.zip】是一个包含JavaScript、CSS和图像资源的压缩包,主要用于互联网应用开发,特别是构建树形结构展示的用户界面。zTree是一个广泛使用的开源项目,它提供了一种高效、灵活的方式,用于在网页...

    html,javascript元素属性文档

    例如,`<img>`元素的`src`属性用于指定图像的URL,`alt`属性提供了当图片无法显示时的文字描述。在编写HTML时,我们需要了解各个元素及其属性,以便正确地展示和控制网页内容。 JavaScript是一种脚本语言,它可以...

    JS对img进行操作(换图片/切图/轮换/停止)

    在JavaScript中,对HTML中的`<img>`元素进行操作是一项常见的任务,这...以上就是对JS操作img元素实现换图片、切图(轮换)和停止轮换等操作的详细解析。掌握这些技巧可以帮助你在网页开发中创建更丰富的动态图像效果。

Global site tag (gtag.js) - Google Analytics