【问题标题】:Can't dynamic resize IMG after javascript dynamic content loadjavascript动态内容加载后无法动态调整IMG大小
【发布时间】:2011-11-12 21:40:01
【问题描述】:

我使用这个来自 dynamicdrive 的 javascript 将内容加载到 div 中:

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function ajaxpage(url, containerid){
        var page_request = false
        if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest();
        else if (window.ActiveXObject){ // if IE
            try {
                page_request = new ActiveXObject("Msxml2.XMLHTTP");
                }
            catch (e){
                try{
                    page_request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                catch (e){}
            }
        }
        else
        return false
        page_request.onreadystatechange=function(){
            loadpage(page_request, containerid)
        }

        if (bustcachevar) //if bust caching of external page
        bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
        page_request.open('GET', url+bustcacheparameter, true)
        page_request.setRequestHeader('charset', 'ISO-8859-1')
        page_request.send(null)
    }

    function loadpage(page_request, containerid){
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
        document.getElementById(containerid).innerHTML=page_request.responseText
    }

我使用一个名为“displayImage('url','width')”的自写 php 函数来显示一个图像,然后将其动态调整为指定的宽度。

这在静态内容上效果很好,但是,该功能拒绝在动态内容上工作。

任何人都可以在这方面给我一个正确的方向吗? :/ 我不太擅长 javascript...

编辑:

抱歉,忘记添加php函数了,就这样吧:

function displayImage($img_path, $height) {
$image_info = getimagesize($img_path);  
$new_dimension = imageResize($image_info[0], $image_info[1], $height);
$returnstr = "<IMG SRC=\"{$img_path}\" " . $new_dimension . "/>\n";
return $returnstr;
}

function imageResize($width, $height, $target) {
if ($width > $height) {
$percentage = ($target / $width); 
} else {
$percentage = ($target / $height);
}
$width = round($width * $percentage);
$height = round($height * $percentage);

return "width=\"$width\" height=\"$height\"";

}

【问题讨论】:

  • 我在您的代码中没有看到任何图像大小调整功能。
  • 我马上添加,稍等..
  • 已添加,抱歉花了这么长时间,但有些事情需要我注意。

标签: php javascript ajax dynamic


【解决方案1】:

PHP 是一种服务器端语言,这意味着它创建页面,将其发送到浏览器,仅此而已。它无法调整您稍后添加到页面的图像的大小。您必须使用 JS 来执行此操作,或者在 ajax 页面本身中使用该 PHP 函数,并动态加载已经缩小的图像。希望这会有所帮助。

【讨论】:

  • 我对JS不太了解,但是如果我要继续,在ajax页面本身中使用这个php函数......你建议我如何继续?因为,我已经在使用 ajax 加载的页面中包含了脚本,但它并没有做太多,但我不知道这是否是您所说的“在 ajax 页面本身中使用 php 函数”的意思。 ..即我不知道如何首先使用php脚本缩小图像,然后使用ajax调用加载页面。 (最终,如果我尝试得足够多,我会成功,但欢迎提示)。
  • 永远不要放弃。我的意思是将收缩脚本包含在您使用 ajax 调用的文件中,以便 ajax 向您发送可以使用的图像(无需进一步收缩)。
  • 感谢您的帮助。我的问题出在 IMG 的 SRC 标签中。必须使用 '../folder/imagename.png' 而不是 './folder/imagename.png' 才能使用动态加载的页面中包含的脚本。 ^_^'
  • 没问题,很高兴您已修复它!大多数时候最好避免使用相对路径('../')并使用绝对路径('site.com/etc' 或只是 '/etc/')。
猜你喜欢
  • 2015-02-23
  • 2016-10-02
  • 2015-07-27
  • 1970-01-01
  • 2011-11-14
  • 2017-02-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多