Javascript将图片 缩略图显示(克服IE缓存)

Javascript将图片　缩略图显示：

 

方案一：        

   　　　var url; //图片位置

         var imageContainer; //显示图片的容器

 

         url = document.getElementById("ImgUrlData").value;

         imageContainer = document.getElementById("divImageName1");

 

         imgheader.src = url;

         imgheader.style.display = "block";

        

         showThumbnail(url, imageContainer);

        

 

         //显示缩略图

        function showThumbnail(url, imageContainer) {

 

                    if (url=="" || url == "undefined") {

                         return;

                    }

 

                     var img = document.createElement("img");

 

                     img.setAttribute("border", 0);

                     img.setAttribute("width", 100);

                     img.setAttribute("height", 100);

                     img.setAttribute("src", url);

 

                     imageContainer.innerHTML = "";

                     imageContainer.appendChild(img);             

          }

功能实现了！ 

发现：在IE中连续请求同一页面时，会不再以缩略图显示，而直接出现原大图。想了一下，原因是：缩略小图是不存在的，只是用脚本处理了（实际缩略图是大图的url）。当请求同一页面时，由于IE缓存了页面，用户请求时，不再调用页面的javascript　脚本，也就没有进行缩略图处理，所以显示大图。

 

于是采用下方案：

方案二：直接放一静态图片控件，控件设置了大小（能解决IE缓存，强制按图片控件大小进行显示）。

 在页面中加入，

 <img alt="" id="imageheader" src="" style="border:0px; height:100px; width:100px; display:none;" />　// display:none 先不显示。

 

 

 

写入javascript 脚本

         var url; //图片位置

 

         url = document.getElementById("ImgUrlData").value;

         var imgheader = document.getElementById("imageheader");

        

         imgheader.src = url;

         imgheader.style.display = "block";//设置显示

       

三：

 

采用一方法，只是在url后面加随机数，以达到改变url形式的目的，每次请求时，都是不同的url, 从而避免了IE缓存。

形如　www.example.com/good.aspx ? (随机数) Math.random()

url=url+"?"+ Math.random().toString()

 

 

 

此外，注意：可在后台加入javascript代码。

  this.ClientScript.RegisterStartupScript(Type.GetType("System.String"), "LoadImage" + "LoadImage".GetHashCode().ToString(), string.Format("<script language=/"javascript/">LoadImage('{0}');</script>", actionInfo.ActionImage));