zoukankan      html  css  js  c++  java
  • 巧妙利用图片IMG的onerror事件,对付网通电信的南北分家

     背景:
    我国电信网通南北分家已经成为了一种不可改变的现状,做网站的朋友都知道,如果想让南北方地朋友们都能够顺利地访问我们的网站,需要买双线服务器,就是既通网通用户又通电信用户的线路,尽管如此有的机房在提供双线服务器的时候会提供两个IP地址(网通和电信分别有一个IP);这时候我们就需要在域名映射的时候映射一个电信地址,一个网通地址,例如:dianxin.xxx.com;wangtong.xxx.com;可是用户访问的时候总是希望访问www.xxx.com,就是说我们需要在用户访问www.xxx.com  的时候智能的判断出用户在北方还是在南方,然后进行跳转。

    思路:
    我们在www.xxx.com 中让客户端同时向地址dianxin.xxx.comwangtong.xxx.com发出一个错误的请求,哪一个地址返回错误的响应速度快就说明用户应该访问那个地址。

    关键代码:
    <img src="http://dianxin.xxx.com/NotExistsUrl" width="1" height="1"
       onerror="location.top.url='http://dianxin.xxx.com/'"/>
    <img src="http://wangtong.xxx.com/NotExistsUrl"  width="1" height="1"
       onerror="location.top.url='http://wangtong.xxx.com/'"/>

    为了在用户下次访问的时候可以直接跳转到比较快的线路上我们可以将这一次判断的结果保存到cookie中。

    IMG
    onerror事件的另一个用武之地:
    我们都不希望用户看到我们网站上面出现无效的图片,即便是出现了无效的图片我们也希望以一种友好的方式告诉用户图片无效,而不是直接给用户看默认的红叉;怎么办,我们可以在图片的onerror事件中将图片的src属性设置为我们网站上已存在的表示图片不存在的图片。
    代码示例:
    <img src="http://www.xxx.com/someImage.gif
       onerror="this.src='http://www.xxx.com/invlid.gif'"/>

    说明:
    关于南北分家的解决方案有很多种,本文只是为大家提供一种思路。
  • 相关阅读:
    MySQL 分页优化中的 “ INNER JOIN方式优化分页算法 ” 到底在什么情况下会生效?
    SDL + OpenGL使用笔记
    多进程和单进程区别
    sed 处理
    window.postMessage
    java List集合分页
    PostgreSQL 10.0 preview 性能增强
    PostgreSQL 10.0 preview 性能增强
    Android Studio快捷键动态演示
    Android Studio快捷键动态演示
  • 原文地址:https://www.cnblogs.com/yukaizhao/p/img_onerror.html
Copyright © 2011-2022 走看看