search

drewbrolik / Responsive-Img

Responsive Img is a jQuery plugin that changes an image's src attribute based on its container's width.
207 stars 36 forks source link

small sized image loading instead of medium or large. #12

Open digisocialnet opened 10 years ago

digisocialnet commented 10 years ago

for some reason my header image is loading the small version when it should load a larger image. do i need to set a size somewhere? it's a responsive width:100% image http://digisocialnet.com

drewbrolik commented 10 years ago

I'm not sure... the default sizes should work fine.

Where are you calling responsiveImg? Are you just using the defaults?

digisocialnet commented 10 years ago

I had my JS concatenated but I have been changing the load order around to see what happens. it works fine everywhere else but i'm just not sure what happened. i was thinking that it was loading before the size of the container was known but loading it last or first didn't make any difference. neither did turning off cloudflare and mod_pagespeed.

i guess i'll keep working on it and let you know when i figure it out. thanks for the great work,

I am using the following setting:

$("img[data-src]").responsiveImg({ srcAttribute: "data-src", jpegQuality: 70, breakpoints: { "_small": 550, "_medium": 850, "_large": 1200 }, pathToPHP: "assets/js/lib" });

digisocialnet commented 10 years ago

i also had the pathToPHP set to /assets/js/lib but i would think that is only for making the images, not serving them right?

drewbrolik commented 10 years ago

You're right, that path is just for making the image, which we're already past because we see header_small in the code.

Also, the loading order is correct in this case because it's definitely switching the image initially. After that, you can just resize the browser to test.

The fact that the same banner works correctly when you click through (to this page: http://digisocialnet.com/blog/8-inspiring-documentaries-that-artists-designers-and-creatives-must-watch) adds some confusion here.

My original thought, based on that, was that responsiveImg is reading the container size for the homepage image wrong... but I don't see any signs of that in the code.

If it helps to troubleshoot, the plugin considers a bunch of different things to determine what size image it serves up. Most importantly in this case, it looks for widths and max-widths set on the image itself, and it checks the width and max-width of the container. (Then it factors in pixel size.) That's why I was thinking maybe the container was set to a small width and overflow:visible or something... but not the case.

I also noticed that between 991 and 992, the image jumps up in size, but the image file itself doesn't change. This shouldn't happen based on the width:100% and max-width:100% on the image. I'm not sure what that means, but maybe that's a clue. Is there something else going on javascript-wise with that image?

Thanks for using the plugin, and sorry it's giving you trouble. I hope we can figure this out.

digisocialnet commented 10 years ago

yeah, it's strange that it only happens on the home page. i did have it working at one point. i am going to try to turn off each javascript one at a time. it also seems to only happen in webkit based browsers. thanks for taking a look at it, i haven't had time to work on it in the last few days but have some time now. i'll let you know what i find out.